Moving top bar menu inside header?

  • Hello, I’m looking for a way to use the menu that now appears in the top bar, down into the header. So, left of the logo as can be seen in this image:

    View post on imgur.com

    I have been at this for days, but could not find a way, also, I have not been able to find a solution through Google.

    When I look at other pages made in OceanWP, like this one: https://oceanwp.org/blog/how-to-build-custom-woocommerce-store-oceanwp-toolset/ I see it should be possible to get the menu in there.

    I have not been able to find a way to remove the hamburger menu as well. But maybe I want both, a simple menu with links to the most important pages, and then a hamburger menu to show more functionality, such as all subpages of the shop, etc.

    As a last little thing, I want to be able to decide what the menu looks like on a desktop vs a smartphone or tablet.

    Where do I start?

    Thanks for the support, and thanks for this cool template!

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hello,

    It seems you are using any full-screen header style.
    Please go to Appearance > Customize > Header > General, from here set the header style as minimal.

    Now go to Appearance > menu, here assign a menu to the main menu from the menu settings, and check if it is working or facing the same issue.

    You can also create a custom header where you can design each header element according to your need(For both desktop and mobile).

    If not resolved with the above, please share the website URL to check the issue.

    Thread Starter ohmarinus

    (@ohmarinus)

    Abhishek, thanks, you’re a lifesaver! I would have never thought and found out this was the reason.

    Now, of course, after having fixed this, I found a new issue (what a surprise haha). I tried changing some settings for the padding, but this didn’t seem to fix the issue.

    The menu works wonderfully, but the cart and search option are ‘pushed’ downward because there isn’t enough space. But there clearly is enough space (as shown in the image), so I think there is some kind of padding or width setting of the ‘Main menu’ that is limiting the horizontal space. I haven’t been able to find out where to change this one. The search icon even stays below the header no matter how wide I set my browser!

    See the enclosed image:

    View post on imgur.com

    Thanks for supporting even the free users, it’s much appreciated.

    Glad to hear that the previous solution worked well.??

    ?Please try to add the below CSS code from the Appearance > Customize > Custom CSS, and check.

    .center-menu #site-navigation-wrap {
    left: 40%;
}

    PS- You can change the left value according to need.

    If not resolved with the above, kindly share the website URL to check the issue.

    Thread Starter ohmarinus

    (@ohmarinus)

    Thanks again, set it to 45% and works like a charm, I can not even resize the browser to be much narrower and it keeps everything neatly within the bounds of the header.

    I did discover two bugs. So I’m investigating if I maybe should do a fresh install and completely remake the website.. I couldn’t find an immediate solution to these issues.

    Issue #1:
    Empty meta options in the blog post page, see this image:

    View post on imgur.com

    Issue #2:
    In blog post page I have one featured image that is now wider than the text, I do now know who or how this happened, but I like it. However, when changing the width of the text column (now set to 700px wide), it also immediately changes the featured image width to the same size.

    Before touching the 700px setting:

    View post on imgur.com

    After setting it back to 700px:

    View post on imgur.com

    Maybe these are known issues, I really like the image content being wider than the text content as it allows for a visual hierarchy.

    My site is currently running on a localhost for sandbox purposes. If you need to see any of the source code of the page, let me know.

    It appears the image is originally placed in this div:

    <div class="thumbnail">
<img src="https://localhost/marinusdebeernl1/wp-content/uploads/2016/08/IMG_POCO_F1_20200502_105609-01-scaled.jpeg" class="attachment-full size-full wp-post-image" alt="You are currently viewing About: Pen Plotters" loading="lazy" itemprop="image" srcset="https://localhost/marinusdebeernl1/wp-content/uploads/2016/08/IMG_POCO_F1_20200502_105609-01-scaled.jpeg 2560w, https://localhost/marinusdebeernl1/wp-content/uploads/2016/08/IMG_POCO_F1_20200502_105609-01-scaled-600x389.jpeg 600w, https://localhost/marinusdebeernl1/wp-content/uploads/2016/08/IMG_POCO_F1_20200502_105609-01-300x194.jpeg 300w, https://localhost/marinusdebeernl1/wp-content/uploads/2016/08/IMG_POCO_F1_20200502_105609-01-1024x664.jpeg 1024w, https://localhost/marinusdebeernl1/wp-content/uploads/2016/08/IMG_POCO_F1_20200502_105609-01-768x498.jpeg 768w, https://localhost/marinusdebeernl1/wp-content/uploads/2016/08/IMG_POCO_F1_20200502_105609-01-1536x996.jpeg 1536w, https://localhost/marinusdebeernl1/wp-content/uploads/2016/08/IMG_POCO_F1_20200502_105609-01-2048x1328.jpeg 2048w" sizes="(max-width: 2560px) 100vw, 2560px" width="2560" height="1660">
</div>

    I can see that changing the content width to 700px again only fits this image into a less wide space, but the div itself is not affected. I can’t pinpoint exactly where this change happens.

    I did try using this snipper from Amit Singh:

    .single .thumbnail img {
    display: flex;
    margin: 0 auto;
    width: 60%;
}

    And tried setting the width to 120%, but of course, this didn’t work haha.

    Thanks for your time, I hope my questions also help other people to solve problems.

    Thread Starter ohmarinus

    (@ohmarinus)

    Just a small update, when setting the width of the content and featured image to 700px, it first shows the featured image in a preview of 700px, same width as the text. But when I publish and then browse to the same page, it reverts to showing the featured image in full width.

    Full width means the image is displayed at 1060px. This only happens in the desktop view and not in the tablet and mobile views. I haven’t declared the value 1060px anywhere so it seems that the system is doing this by itself.

    I don’t know what’s going on here. But I would like the option to change it to what I want. Must be an error?

    • This reply was modified 3 years, 6 months ago by ohmarinus.
    • This reply was modified 3 years, 6 months ago by ohmarinus. Reason: Clarification

    Hello,

    Apologize for the delay in response.

    1. It seems the plugin conflict issue. Try to disable all the nonocean plugins and check if it is working well or facing the same issue. If working well, enable the plugins one-by-one, and refresh the page after enabling each plugin, to check the conflict issue.

    2. Kindly replicate the issue and share that page URL and backend snapshot to check the issue.

    Thank you.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Moving top bar menu inside header?’ is closed to new replies.