- This topic has 25 replies, 6 voices, and was last updated 5 years, 3 months ago by
.
-
Posts
-
Hey Tom
For some reason Customising – Colors – Primary Navigation – Background Current isn’t working in desktop or mobile view? I set it to #878787 however it still shows the default hover colour. At no stage is the background current colour visible.
Plus in mobile view I can make the hover colour appear on more than one item. If I click about, then say map, then say terms etc the hover colour shows on any/all clicked items at the same time. If I click on a hover coloured menu item it reverts to the background colour. I can also refresh the page and they all revert back to the background colour.
If you check this bootstrap site and test the menu you will see what I believe should happen. You can also manually scroll this one page site or click the links and they have a hover colour and or a page position colour.
Cheers
Customer Support
Hi Garth,
I think it’s because there isn’t a
current-menu-itemclass being added by WordPress in the menu when anchors are clicked.Can you try this suggestion here? https://generatepress.com/forums/topic/highlight-menu-anchor-link-on-relevant-section-on-page-using-elementor/#post-357627
I’m actually using that plugin Leo.
I will go take a closer look at it however i’m pretty sure it’s set up correctly.
Tom, do you have any suggestions ?
Lead Developer
The current color only works on pages for the current page.
Since you’re using one page, the current class isn’t being used at all.
Instead, try this instead:
.main-navigation .main-nav ul li.sfHover > a { background-color: #878787; }Hi Tom
Yeah that’s what i figured.
I tried your CSS above however it doesn’t remain highlighted when I click within the body etc plus it doesn’t track the scroll. It just highlights the clicked link until you click elsewhere and it clears reveling the default background.
I can make the menu links highlight matching the relevant section using this.
.menu-item a.mPS2id-highlight{ background: #aa0; }If I click say on the last link with the page at the top the menu items highlight moving from the first to last item.
For some reason the GP hover colour stays active (if set) so I need to disable it by removing the hex.
If I could get the hover to clear once you’re no longer hovering over a menu item then it should do what you’d expect.I don’t get why hover isn’t working like hover should? It should clear after the nav item gets clicked?
In that case, try making so the background color in this CSS is the same as the normal menu item background color:
.main-navigation .main-nav ul li.sfHover > a { background-color: #878787; }Hi Tom
The problem I have is any hover colour becomes the set colour of the link once clicked overriding any others.
How come the hover colour sets as the visible active menu colour when you click the menu item?
I have to click in the body to release the hover colour
Shouldn’t hover be for hover only, releasing the hover based colour following clicking the link?
Also without setting the hover colour it appears you cant style the search field within customise ?
That’s the focus style. The focus style means that people with disabilities can navigate your site using their keyboard.
So the focus and hover styles are the same.
The CSS I provided above should force the focus style to be whatever background color you like (same as regular menu items, current menu items etc..)
That’s correct, the search field styles itself to fit with your navigation.
Good Morning,
I have bought the pro version of generatepress and I am trying to follow the advice of the explanatory video of configuration, but in the color menu I do not get the options that in the video. Once I give the colors option, it allows me to modify “background color-Text color-Link color”. You can tell me how I change this to be able to modify the colors of all the contents. Thanks and best regards
Customer Support
Hi Ana,
can you go to Dashboard > Appearance > Generatepress and check that the Colors module is active. All of the GP Premium features need activating before you can use them.
Hi Tom
I’ve been meaning to reply re you’re last comment #579031 for some time now. The last time I tried too you were moving server and posting comments was disabled.
While what you’re saying should work the fact remains that the hover colour on this particular site is acting somewhat between hovering and a clicked link. Maybe I’ve not explained it in a way you get what I mean?
What happens is the hover color sets and remains as the top colour covering the actual colour of the menu background and or a clicked link color (depending on position) until such time as you click somewhere, typically in the body.
If I style the hover colour to match the background and or the clicked link color then I have a scenario whereby it either looks like the background so you can’t actually see a physical difference which defeats the purpose entirely and or I have two links styled to look like they’ve been clicked which is also counterproductive. Either way the hover link color covers the clicked link color.
Currently I’ve removed the hover colour because it doesn’t seem possible to get it working even though it really should given other single page sliding sides work fine.
BTW it much worse when it comes to mobile view. In mobile view I can make pretty much every menu item retain the hover color. The only way to clear the hover item color reverting it to show the background and or clicked link colour is to click the link(s) again. The only way you can get the actual clicked link color to show when the hover color is set in customise is to navigate to the page and click that menu item again to release the hover color exposing the clinked link colour.
Perhaps it’s something to do with the page-scroll-to-id plugin causing GP to act differently unless I’m misunderstanding what you’re saying which is entirely possible. Having said that I don’t feel that you’re clear on what I’m experiencing either. Maybe you need access to my staging site to see what I mean for yourself. I haven’t tested with other browsers however I’m using chrome which is by far the most popular and it works fine with the bootstrap example site linked below.
This bootstrap site is an example of what should happen (note the hover and clicked green colors are very similar yet clearly different too) and the hover colour only shows on hover. If you click a link the hover colour clears as soon as the mouse pointer is moved regardless of whether the link is clicked or not leaving only the other green color showing according to the relevant page position versus clicked item.
I don’t understand why I can’t make the GP menu colors and actions mimic the same scenario as this bootstrap site I built.
Cheers
Can you turn hover colors back on your current site so I can test?
Your other site doesn’t have focus styles, which is likely why you’re not having the same issues. Try tabbing through your website, and you’ll notice you have no idea which menu item you’re currently on. That’s a big problem for people who aren’t able to use a mouse.
Hi Tom
I’ve activated the default hover colors (background and text). Check out the mobile view. The issue should be extremely obvious. I think I get what you mean re tabbing through.. The bootstrap site doesn’t tab across the menu.. It does however appear to on the tabbed content so I’ll look into that and see what I can do to fix it. Thanks for pointing it out.
Cheers
What if you add this CSS?:
.main-navigation .main-nav ul li:focus > a, .main-navigation .main-nav ul li.sfHover > a { background: transparent; } .menu-item a.mPS2id-highlight { background: #6c6753 !important; }Hi Tom
I added that CSS and as you can see it’s still acting much the same however now the hover color sits under the clicked menu item colour. If you move the page the hover color remains and again the mobile view emphasizes this issue in much the same way as I previously explained.
- You must be logged in to reply to this topic.