[Resolved] Menu Bar color Change

[Leo]

That’s a good start. Now add this CSS to make it red:

.main-navigation .main-nav ul li.menu-item-219 a,
.main-navigation .main-nav ul li.menu-item-219 a:hover {
    background-color: #ff0000;
}

[Steig]

That works great on a desktop. On an iPhone and iPad (in portrait mode) the Sign Up didn’t turn red and on the slide out menu, the Log In / Sign Up menu items are side by side instead of just sequentally going down the page.

[Leo]

Try the edited code:
https://generatepress.com/forums/topic/menu-bar-color-change/#post-705336
https://generatepress.com/forums/topic/menu-bar-color-change/page/2/#post-705380

[Steig]

Still looks good on the desktop, but iPhone/ipad (portrait only) the log in/ sign up are still side by side and now the order of the two is reversed. So the last menu item is now Log In for the small screens.

[Leo]

Can you remove the custom CSS classes in menu items? Shouldn’t need them anymore.

Keep in mind that there might not be a perfect solution for this due to the bug in that plugin.

But I’m certainly trying my best.

[Steig]

I really appreciate your assistance! I’ve removed CSS Classes in the menu items and on the desktop, the Sign up is red and far right. The Log In should be normal color, but also on the right to the left of the Sign Up. It currently is just in the normal sequence on the left.

Viewing it on a mobile, the menu items all flow down the left hand side, but Sign Up and Log In need to trade places in the order they are showing.

[Leo]

Try the edited code here again:
https://generatepress.com/forums/topic/menu-bar-color-change/#post-705336

Unfortunately I cannot change the menu item order on mobile – they are showing up as the order you’ve added them.

[Steig]

OK, I’ve deleted the two menu items and re-added them so the order shows correctly for mobiles.

I’ve edited the menu item numbers to correspond with the new numbers given when created.

Unfortunately on mobile, Sign Up isn’t red and on desktop, they don’t show in correct order. Here’s the code I’m using:

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

I tried flipping the 256/255 just to see if that did anything and it doesn’t. 256 is Sign up and 255 is log in.

[Leo]

Since we got everything right in desktop, it might be easier to simply create a new menu with the correct order then assign to slideout navigation.

[Steig]

Mobile is what is correct right now, except sign up is not red.

Desktop order is not correct but sign up is red.

[Leo]

Desktop order is hard to correct as we are using float on both.

Can you set it like before so desktop is correct?

Then simply make a new menu for slideout menu on mobile.

[Steig]

Believe me, I wish I’d thought of creating a second menu for mobile. But I didn’t and deleted the individual menu items for sign up and log in, recreating them. So I’m stuck with working with this.

[Leo]

Couldn’t you just re-create what was working again?

Right now if we use this CSS:

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

They won’t be in the right order.

[Steig]

I finally got the desktop menu correct. The solution was to physically switch the order for log in and sign up in the menus screen. They present exactly opposite as to how they are ordered.

My only problem now is that the menu created only for the mobile Slideout menu doesn’t have Sign Up in red.

I’ve tried putting nav-button in the CSS Classes and also have this code

.main-navigation .main-nav ul li#menu-item-265 a,
.main-navigation .main-nav ul li#menu-item-265 a:hover {
    background-color: #ff0000;
}

Maybe it’s no longer considered part of main navigation? since it shows only on the phone, I don’t know how to confirm that it’s still menu item 265.

[Leo]

Since you’ve added the nav-button class, this CSS should work now:

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

Let me know 🙂

[Author]

Posts