Hi,
Tried searching, but no success.
I want to change the menu font for the active page; the typography settings have no effect. Nor do the other options for changing the border or background.
My amateur idea is that the setting is being “overridden” somewhere, but i can’t figure it out.
Copying custom CSS code from another thread also didn’t work (here).
Would love to understand what i am doing wrong. Or, even better, give someone smarter than me a temporary login……
For nav nestable you should not use the :hover or :active state, but instead style the mobile menu that will also reflect on pc style.
So on the nav nestable element itself (so not the links below it) there’s mobile menu and some toggle to keep it open. There you can style hover and active.
I think you should style the “pc“ version to not set it to breakpoints below it and thereby miss the pc version (not 100% sure but thats how i do it, so use the keep nav open toggle)
Thanks for the rapid reply - but afraid i don’t understand!
Does your explanation apply to viewing on a desktop?
It’s 1 menu (label mobile menu) for all.
I just checked, and i do use the :hover state on the individual nav links, but not the active state.
The active state comes from: Top level item, Active, typography, textcolor - on the nav nestable element itself.
It sets both pc and mobile menu
Hi,
Thanks for taking the time to check!
I think we are now talking about the same issue: these settings for the active section are not having any effect. The standard settings are……
So the typography setting on active do not work?
To For hover style, you should apply the :hover state to every single nav item
Yes, that’s right: the active setting is having no effect.
Not worrying about hover - a bit too fancy for me!
Border and background don’t work either - nothing active.
Have tried making new headers too, and still doesn’t.
Thats odd, can you give a link so i can check the css?
To be sure, active means it will show up in the menu while being on that page. So no mouse over event (that’s hover) but to indicate where you are in the menu.
For the hover effect:
Select the Nav link in the element bar (right side)(need to be done for all link items)
Press selectors on the left side:
Select hover:
When selected, hover lights up in yellow, change the text color or what you want to “hover“ and after make sure to deselect the hover state by pressing the x icon.
So when added bright blue to hover state it will now turn that color on mouse over
Again, make sure to deselect hover after, or all other changes will be on hover state
Thanks for more comments!
How can i share the CSS? Is it something i export? Send as a DM?!
(Nooooob out of depth)
Is it a live site (on the internet) just send the url (www address)
If it’s on locahost (your computer) it can’t.
Its B - nowhere public. Want it working before it sees the world.
Ahhhhhh.
Sometimes when fighting something that doesn’t work, you might end up setting all kinds of thing that interfere with the intended behavior.
Try cleaning all unused css settings as much as possible.
Also, if its not a real web server, it might be the cause of the Active settings not being applied as some JavaScript DOM might not execute correctly.
Maybe try a new (clean) Nav menu en implement the hover state as that will be most useful for user interaction.
Then first try to set a color change on the text as that’s most easy. And only after that, try changing the background color.
For the hover state, i wrote that step-by-step tutorial. Should be doable.
Thanks for the suggestions. The active settings work if the link is set to one particular page, but no others. So clearly there is something different here - but struggling to spot it.
Will take “clearing css settings” as a clue for what to look for…..
Just to check,
Only 1 page can be active at the time, as that will be the page the browser is at. So when you are at your homepage, The nav link from Home will be active.
When you are on your contact page. The navlink of Contact will be active.
So, another couple of hours and no progress - the nav menu only works with one particular page. I can put this one behind every link, and then the menu works, but rather misses the point of all the work building other pages!!
Defeated for today. Here’s hoping that tomorrow i find a clever suggestion waiting for me here!!
Again to make sure:
As you say it only works with one particular page, i think it is not on a template, where a template is a part you can re-use over and over.
To add a template, go to WordPress menu, Bricks, templates, add new template. Assign it as Header on the right side. Save it, and then edit with Bricks.
You can copy your already created menu into Bricks.
Then assign a condition to it to show on the entire website. Press the gear icon top left inside Bricks builder, Press “theme styles”, conditions and add entire website.
Now the menu should show on all of your pages
Same goes for Footer. As it’s used over and over, it needs to be a template.
Right, solved it - and what follows is another embarrassing admission of an amateur error. The issue was the that the pages in the menu were not published; once published, everything worked.
The one page that was displaying was already published.
Really pleased i can keep using the Bricks Nested Nav. I tried the WP default in desperation - man that was buggy.
@Ferry Thanks for joining me in my troubles. Feeling less alone is hugely valuable, and much appreciated!
Having made all amateur errors makes you a pro!
Most important is to don’t quit.
