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

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/

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...

Give this CSS a try:

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

Yep, It worked.. you are the best...

Thanks David :)

Glad to be of help.

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...

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.