[Resolved] Home Page Nav Button Not showing up on other pages

[Max]

Hi Guys,

I added a button to my navigation and for some reason, it isn’t showing up on my other pages.

Here is the home page link –> http://christinahouserphoto.flywheelsites.com/

Here is the other page where the button CSS disappears –> http://christinahouserphoto.flywheelsites.com/christina

I have added the css in the additional CSS so I thought it was a global change to the nav bar.

Thanks!

[Leo]

Hi Max,

Looks like your CSS is targeted to the current menu only: .generate-merged-header .main-navigation:not(.is_stuck):not(.toggled) .main-nav > ul > li[class*="current-menu-"] > a

It would probably be better if you add the CSS to the nav-button class you’ve already added to the CSS Classes for that menu item.

Let me know if this helps.

[Max]

If I just remove the “current class” aspect of the css, what would that look like so it stays styled across the board?

[Leo]

Try it. I would assume that would target to every menu item.

[Max]

lol I just did and it made my menu go crazy! All the tabs had buttons.

I had it simply targeting the nav button across the board until I made the background fill the entire screen and then I had to add more code and target the button directly I guess.

Any ideas on that code as a whole?

Thanks so much! I am trying to learn the targeting ins / outs for this theme.

[Leo]

Didn’t you get it working here?
https://generatepress.com/forums/topic/targeting-a-single-navigation-menu-item-to-create-a-button/page/2/#post-268607

[Max]

Hi Leo!

Yes, it was working until I added the background image to fill the entire screen.

I think you gave me the new code I am using now to target the button while using that feature.

However, the new code came with that “current menu” tag and I am having trouble making it work now.

Thanks so much for your help.

[Max]

If you check out the site now, this is how the button looked prior to adding the background image feature.

Once I added the new code snippet, the button worked properly again however that new code added some problems.

Hope that makes sense.

[Leo]

Can you try the original way again so I can take another look?
Don’t think adding the background image would have change the style of menu items unless I’m missing something.

[Max]

Ok!

I set it back to the original targeting.

You can see the button is just outlined with the color I want and no matter what I add, it stays that way.

Thanks Leo!

[Leo]

Try this instead:

.main-navigation .main-nav ul li.nav-button a {
        background-color: #4e5e78 !important;
	border: 1px solid #4e5e78;
	color: white !important;
	padding-left: 25px;
	padding-right: 25px;
	padding-top: 6px;
	padding-bottom: 6px;
	border-radius: 3px; 
	margin-left: 18px;
	margin-top: -4%;
	font-size: 15px;
	letter-spacing: 3.7px;
}

[Max]

It worked!

Leo, you rock! I swear I thought I tried that but I think I had my semi-colon in the wrong spot.

Thanks bro, you guys are amazing.

[Leo]

You’re welcome 🙂

[Author]

Posts