[Resolved] Using 2nd navigation in left sidebar issue

[NIKOLAY]

Hi,

I’m using 2 navigation menus in my web. 1st one is located under header and 2nd one is in left sidebar. (My web is using sidebar/content/sidebar).

Is it possible in mobile version instead of showing 2nd navigation under content to be display under main navigation before the content?

Best regards: Nick

[David]

Hi there,

can you link me to your site so i can take a look?

The alternative would be to use the Off Canvas Panel for mobile where you could combine the two menus:

https://docs.generatepress.com/article/off-canvas-panel-overview/

Then it would require a little CSS to remove the Secondary nav …. let me know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[NIKOLAY]

it is http://elhovobg.org.

It is on Cyrillic, hope that is not big problem.

Regards

[David]

Lets try this.
Add the following code to the after_header hook:

<div class="second-nav-mobile hide-on-desktop grid-container">
	<?php 
	if ( function_exists( 'generate_secondary_navigation_position' ) ) {
		generate_secondary_navigation_position();
	}
	?>	
</div>

You can use a Hook Element to do that:

https://docs.generatepress.com/article/hooks-element-overview/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[NIKOLAY]

Works perfectly!

The only difference is that I did not use after_header hook. I use inside_side_container.

Thank you!!!

[David]

Awesome! Glad to hear that 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[NIKOLAY]

Just one final question.

Any idea how to change 2nd menu to be floating left (same as above navigation) – now is on centre?

Thank you!

[David]

Try this CSS:

.secondary-navigation .menu-toggle {
    text-align: left;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[NIKOLAY]

Works perfect!

After doing new hook for 2nd menu and adding css, now bellow under the content the 2nd navigation bar did not work on mobile version anymore.

Can I just remove in mobile version not to display 2nd navigation located in left sidebar?

Thanks!

[David]

Try this:

@media (max-width: 768px) {
    .gen-sidebar-secondary-nav {
        display: none;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[NIKOLAY]

Wow!!!

I have no words to describe how great you are!

This is the best online support ever!

Many Thanks for all your help.

Regards: Nick

[David]

happy to hear that !

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts