Active links in header & customised mobile menu

[doughballs]

Hi. Forgive me if I’m being dumb, but I can’t see how to initiate an ‘active’ state in my nav bar. When the user hovers, the background turns red - I would like the background to stay red if clicked as well (to indicate the active page. Also previous page link should become transparent). Please note, I am currently using buttons as nav links in my nav bar, but I could switch to inline navigation if that helps at all (I did try this on another header but it didn’t seem any different).

Just to make things more complicated, there are more pages than are listed on the nav bar. For instance, for the destination pages, the destination tab should really remain ‘active’, as there are 20 or so destinations that have unique pages within this one page.

Secondly, do you have any suggestions for expanding the layout potential of the mobile side menu? Currently all I can put in are the links to the main pages, but I would like social icons and phone/email buttons in there. Is there a way to customize it further?

Link as a secure message. Thanks.

[Prasant]

Hello @doughballs,

Thanks for asking.

You can change the active link color in header builder from Primary Text Style > Text Color > Interaction.

You also have the option to make the changes using CSS. You can add following CSS under Pro > Theme Options > CSS for active colors:

.x-menu > li > .x-anchor[class*="active"] .x-anchor-text-primary {
    color: #000 !important;
}

.x-menu > li > .x-anchor[class*="active"] {
    background-color: #ddd !important;
}

To have social icons in mobile menu, you can add custom menus and then add appropriate shortcodes to display social icons. Please take a look at following thread

Adding Social Media Icons to Mobile Menu

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.