[Resolved] Navigation on specific pages/categories

[Annika]

Hi! I’ve found myself in real deep waters (for me) and would need some help.

I’m creating a site with no header, but a sticky sidebar with logo and navigation. On certain pages and category pages I would need to have a horizontal top navigation menu, because with the sticky sidebar everything doesn’t show if there are several submenus with too many buttons. Right now I’m using the secondary navigation as my primary (if you know what I mean) because that was the only way I found out how to put it under the logo image.

I tried this (and of course changing it from secondary menu to main) but it didn’t work, and also it put the menu in the sidebar instead of on top of the page. It was switched on in the customizer and with the option of it being on top of the page.

Hope you understand, hard to describe these things in english!

[Tom]

because with the sticky sidebar everything doesn’t show if there are several submenus with too many buttons

I’m not too sure what you mean by this – can you explain further or maybe show me? 🙂

[Annika]

So sorry! In my navigation menu in the sidebar, the submenus fly out to the right. But if there are too many, they don’t fit on the screen. And since the sidebar (including the navigation menu) is sticky it’s not possible to scroll down. When you scroll, the menu sticks and the content behind it scrolls. I’m using the Sticky Menu (Or Anything) On Scroll plugin.

[Tom]

Ahh I see. Sticky elements do have that issue with dropdowns I’m afraid.

What if the sub-menus went straight out to the right? Would that help?

Let me know 🙂

[Annika]

It definitely would! 😀

[Tom]

Try adding this CSS:

.main-navigation ul ul li {
    position: static;
}

Let me know 🙂

[Annika]

Works great, thank you!

[Tom]

You’re welcome 🙂

[Annika]

Something new came up related to this, I don’t know what happened, I didn’t change anything in the code or customizer, but suddenly my menu looks like this. Only things I can think of is that I updated wordpress, I deleted some plugins, but why would it have any effect on the menu? Before, the text was vertically aligned in the middle next to the images. Changing the line-height makes the images stick together again but the text stays on the bottom. Tried som other things but nothing works. Help!!

[Tom]

Any chance you can link me to the page?

[Annika]

Ok so apparently it was the update, lots of stuff is not working… Just when I felt I had my flow back on 😀

[Tom]

Which update? WordPress 4.6? GP?

[Annika]

Sorry, didn’t see your response! It’s in maintenance mode but I’ll give you a quick look, thank you! Here it is.

[Tom]

I’m not really sure how it was working before, but this CSS fixes it:

.menu li img {
    display: inline-block;
    vertical-align: middle;
}

[Annika]

I’m afraid it doesn’t. And I think there is a bigger problem because the whole site is falling apart, it’s as if none of my css (that I put in through simple css) is working. I can adjust some of the widgets, but not the theme. For example I removed the header but put an image in the header to show on mobile devices only, not it’s showing all the time, the horizontal navigation on top is only supposed to show on certain pages and categories, my content field was set to have no padding at all, it’s basically a mess and it happened after I updated, not exactly after but a while after.

[Author]

Posts