[Resolved] I want my secondary Menu to Appear just as Avocadu.com

[Hemant]

Hello Team,

While on desktop my menu’s appear just as I want, Is there a way to make my secondary Menu appear similar to what I can see at Avocadu.com for mobile phones and Tabs?

My Site: https://Fatlossplanner.Com
Secondary Menu should Appear as: Avocadu.com

Please advise.

[David]

Hi there,

do you mean the top right navigation that has the button?

If so this article explains how to add buttons to the nav:

https://docs.generatepress.com/article/adding-buttons-navigation/

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

[Hemant]

Hi David,

Thanks for the quick response..

I am referring to the navigational links located below the header..

On top right side you can see the primary menu but just below, there are secondary menu.. The background of the menu is green at avocadu.com

Now I have tried to setup a similar view on my site with different color (my site: fatlossplanner.com). And it looks ok in desktop but if you look at mobile the menu looks of secondary menu changes.. I want my Secondary menu to look same as the secondary menu looks located at Avocadu.com…

[David]

Give this CSS a try:

@media (max-width: 768px) {
    .secondary-navigation .menu-toggle {
        display: none;
    }
    .secondary-navigation ul {
        display: block;
    }
}

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

[Hemant]

Yep, It worked.. you are the best…

Thanks David 🙂

[David]

Glad to be of help.

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

[Hemant]

One last question though, I am not able to add a call to action button on the navigation menu.. I tried following your guide at: https://docs.generatepress.com/article/adding-buttons-navigation/

Just to let you know the steps I performed:
1.) Went to theme settings – Additional CSS – and pasted the CSS code for fixed secondary header (this worked).
2.) Then I pasted one more CSS code Located at the https://docs.generatepress.com/article/adding-buttons-navigation/ link but this time it did not work… any guidance from your side is appreciated…

[David]

So just to be clear, you need to go Appearance > Menus – select the menu and the menu item you want to make into a button and add the CSS class e.g nav-button in the CSS Classes field.

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

[Author]

Posts