[Resolved] Menu Bar color Change

[Steig]

Hello,

I’d like to insert vertical white lines between each menu item on the primary navigation bar. In addition, I’d like to change the primary background and hover color for just one menu choice.

Could you please tell me how to do that?

Thanks!

[Leo]

Hi there,

For the lines between each menu item, do you want them for signup and login links as well?

As for the hover color for a specific menu item, follow step 1 here:
https://docs.generatepress.com/article/adding-buttons-navigation/

Then the CSS should be:

.main-navigation .main-nav ul li.nav-button a:hover {
    background-color: #fff;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know 🙂

[Steig]

I’d like the vertical white lines to show between home and communities and contact us on the left and login and sign up on the right. When the sticky navigation activates on scrolling and the navigation logo shows up, i’d like a white bar to show to the left of the home, so it’s between the loco and home.

The “sign up” (only) background should be red all the time and the mouse over would be red too, just for that item. The code you gave above should do the mouse over color.

What size should the navigation logo be? I have a 512×512 png in there right now and it looks really small. I’d like it to almost fill the height, which is set to 39px right now.

Thanks

[Leo]

Try this for the border:

.main-navigation .main-nav ul li a {
    border-left: 1px solid #fff;
}

As for the Sign Up background color, in that case you can use this method here:
https://docs.generatepress.com/article/adding-buttons-navigation/

I don’t see a navigation logo currently. The size is determined by the navigation height:
https://docs.generatepress.com/article/menu-item-height-width/

There is also a bit of padding that’s added to the logo by default which we can remove once you’ve added in.

Let me know 🙂

[Steig]

Thanks Leo!

Please scroll down as the navigation logo is set to show only when the main logo at the top of the page scrolls away.

I’ve changed the button to red, but I already had a CSS statement for that menu item to float right “menu-item-float-right”. Can I have two CSS statements? I tried putting a semicolon between that and that didn’t work.

Please look at it a mobile device. The menu slides out from the left and doesn’t show anything and the background as it slides out, takes over 3/4 of the visible space.

[Leo]

– Ahh sorry I missed that.

We can remove the navigation logo padding with this CSS

.main-navigation .navigation-logo img {
    padding: 0;
}

If you want it even bigger, then you will need to increase the sticky navigation height.

– To add two classes, separate them by a space class1 class2

– For slideout navigation, can you double check this?
https://docs.generatepress.com/article/activating-slide-out-navigation/#empty-slideout-navigation

[Steig]

Removing the padding around the navigation logo makes it look good. Thanks!

I’ve tried putting the two CSS classes side by side but for some reason it causes a different menu item to turn red!

Sign Up should be the outermost menu item and should be red. I’ve tried different orders:
menu-item-float-right nav-button and also nav-button menu-item-float-right and they both cause the “log in” menu item, which is on the left to turn red. The Log in menu does have the menu-item-float-right css class applied to it. But not the nav-button. I have no idea why that is happening.

If I remove the menu-item-float-right from the sign up button, then it’s not placed correctly, but it does turn red.

I’ll check out the link for slide out navigation.

[Leo]

Hmm that doesn’t make sense.

Currently the nav-button class is added to the Log In menu item. Can you remove it and add it to Sign Up?

[Steig]

I really don’t have nav-button set on the Log in menu item. Here’s the screenshot showing it.

The CSS Classes window is quite small, but I’ve scrolled to the left and right on it, making sure it’s not there.

Then you can see the Sign Up CSS Classes window. I scrolled it to the left so you can see the nav-button is set. The text to the left is the end of the “menu-item-float-right” class with a space between them.

https://www.evernote.com/l/AHp15IhGttlGHbamYq6GEXBjoTcPrTIJAFU

[Leo]

Perhaps there is a caching issue?

From the code I can only see nav-button added for Log In:
https://www.screencast.com/t/zmIxm2pK

[Steig]

That is pretty amazing, because the menu is also showing out of sequence on your screen. in the admin module, the menu structure has sign up as the last item and shows on my computer in the right most position. From your screencast image, it’s clear the Log in is showing in the right most position on your computer. Not on any of the three I checked it out on.

I don’t even know how to trouble shoot that one. I have three menu items (contact us; Log In; Sign Up) that are being called using shortcodes via the plug in Shortcode in Menus (https://wordpress.org/plugins/shortcode-in-menus/).

For example, just now I removed nav-button and put menu-item-float-right in the Sign up css class and yet when I test it, Log in moved to the right. Nothing is in the Log in CSS box. That pretty much settle it in mind that Shortcode in Menus is the culprit.

Do you have an alternate way of calling a shortcode from a menu?

[Leo]

That is pretty weird indeed.

Unfortunately that’s the plugin we usually suggest.

Maybe it’s worth checking with their support?

[Steig]

I’ll post something on their support forum, but from looking through what is already there I believe this plug in is most likely abandoned.

[Leo]

That’s lame. The plugin has some good review too. Such a weird bug though.

Let’s try a bit of hard coding. Not the best way but in theory it should work.

Add this CSS and see if we can at least get the order right first:

@media (min-width: 769px) {
    .main-navigation .main-nav ul li#menu-item-219,
    .main-navigation .main-nav ul li#menu-item-218 {
        float: right;
    }
}

[Steig]

That did cause the menu to display in the correct order on my computer. Hopefully yours as well!

[Author]

Posts