styling secondary navigation

Hi Marco,

Can you link us to the site in question? So we can inspect the page source and see why the custom styling isn't applying.

You can use the private information text field to provide the details. Thank you. :D

kind of got it to work by adding a parent container first:

.inside-header .secondary-navigation {
	background: none;
}

.inside-header .secondary-navigation .main-nav ul li a,
.inside-header .secondary-navigation .menu-toggle,
.inside-header .secondary-menu-bar-items .menu-bar-item > a {
	color: #515151;
}

.inside-header .secondary-navigation .main-nav ul li a {
	font-size: 15px;
}

.inside-header .secondary-navigation .main-nav ul li:hover > a, .secondary-navigation .main-nav ul li:focus > a, .secondary-navigation .main-nav ul li.sfHover > a, .secondary-menu-bar-items .menu-bar-item:hover > a {
	color: #7a8896;
	background: none;
}

body button.menu-toggle,
body button.menu-toggle:hover {
	border-radius: 0;
	background: none;
}

one other issue I'm having is that when I use the secondary navigation as main navigation on a certain page there won't be any mobile menu on that page - do you have any idea how I could work around that?

thanks

kind of got it to work by adding a parent container first:

Ah if this works then the issue is likely related to CSS precedence. Perhaps your previous CSS selectors were less specific, hence, it loses on CSS precedence.

one other issue I’m having is that when I use the secondary navigation as main navigation on a certain page there won’t be any mobile menu on that page – do you have any idea how I could work around that?

We can't be sure which way to point you to if we're not sure why the issue occurs. Any chance you can set up a staging site we can inspect? So we can have a better idea why it's happening. Let us know. :D

you can have a look here: aicadium.ai/dev - the page in question where I use the secondary menu is the single news page - just select one of the news - let me know if you need anything else.

Thanks.

Any particular reason why you must use the Secondary Navigation on this page?

If it's about which menu is assigned, we can just filter the menu to be used by the primary menu depending on page with a filter.

Example: Setting a different menu for Front page, and another for the rest of the pages.

add_filter( 'wp_nav_menu_args', function ( $args ) {
    if ( 'primary' === $args['theme_location'] ) {
        if ( is_front_page() ) {
            $args['menu'] = 'Home Menu';
        } else {
            $args['menu'] = 'Another Menu';
        }
    }
    return $args;
} );

This way you don't have to use 2 menus.

the reason for using two different menus is because on the front page the menu consists just of a bunch of anchors pointing to different section on the very same page - when I'm on the single page that menu (primary navigation) does not work anymore.

however as mentioned earlier there is no mobile navigation anymore then on the single post page when I'm using the secondary navigation and I don't see a way to have one there at this point.

with the filter you mentioned above would this also work with the mobile navigation if it is set to the 'primary navigation'

Hi there,

the filer that Elvin provided will work for the Primary navigation, and this will apply to both the desktop and the default mobile navigation ie. NOT using the Off Canvas panel for mobile.

Thank you guys - very much appreciated - Elvin's use of the filter worked just fine.

No problem. Glad you got it sorted. :D