[Resolved] Menus for one page themes with other pages

[_blank]

Hi there,

‘Solo’ is a one-page theme, however, it is capable of hosting other pages. For example, in the ‘latest news’ section there’s previews of what would be other pages / posts. They aren’t live on the demo site, but presumably this means it’s fine to create other pages, even on a ‘one page’ theme.

My question is, once someone is on another page, how does navigation work? The top menu, by default, is made to navigate the homepage only via # anchors. We can update the menu to include the entire site URL to direct people back to the homepage and then the anchor section. For example, instead of #latest-news, it’d be mywebsitedomain.com/#latest-news.

Is that best practice? Any SEO considerations, or alternative ways of doing it?

Many thanks

[David]

Hi there,

yes thats correct you would need to edit the Menu items to include the domain.com/#jump-link – i don’t think there is an alternative method of doing it without throwing JS at it or displaying a different menu on your other pages.

[_blank]

Thanks. Just one issue:

When using # anchor, the text in the top menu was white and very readable against the background.

Having updated all menu items to hyperlinks, they are now obeying the global hyperlink colour, which is not so readable, as you can see by the image.

We want to keep the current background colour for the menu, but can’t see how to override the colour for menu links only?

Many thanks

[David]

They are probably attracting the Current Menu item color in Customizer > Colors –> Primary Navigation.

[_blank]

That doesn’t seem to be the case. There’s 3 colour options we can change, but they only seem to affect the colour once scrolled down, and the menu bar has changed colour.

Something about changing the menu links from #anchors to full hyperlinks is forcing the colour.

[Ying]

but they only seem to affect the colour once scrolled down,

Yes, that’s correct. The original primary navigation color is set in the Header element, you can find it at Appearance > Elements.

[_blank]

Thanks – we’ve managed to update the standard appearance from there, but now we can’t seem to edit the ‘hover’ appearance for the menu when scrolled down. It’s just remaining the same colour when hovering.

[David]

Can you share a link to the site so we can see where that color is coming from ?

[_blank]

You still have admin access (see private info).

[Ying]

The admin access need username and password, so we are not able to log in to see your site.

Sounds like the menu items are using the current color as they are HTML anchors of this page. So the hover color is overridden by the current color.

In this case, CSS is needed.

Can you provide login details using private info field so we can take a look?

[_blank]

Apologies, you have access from a previous ticket, but of course you won’t have saved the login. Please check your email for pw reset link.

[Ying]

So it is the situation I described here: https://generatepress.com/forums/topic/menus-for-one-page-themes-with-other-pages/#post-2093427

You can try this CSS to override the currentcolor.

.main-navigation .main-nav ul li[class*="current-menu-"]:hover > a {
    color:#000000;
}

[_blank]

Solved, thanks!

[Ying]

No problem 🙂

[_blank]

Sorry to reopen, but just noticed our top menu is behaving differently on pages / posts. Homepage is fine and as expected, but on pages / posts it’s producing strange colours on hover. Hopefully you can point out how to have it behave the same everywhere.

Many thanks

[Author]

Posts