[Resolved] Nav Menu

[Brian]

Hi,

Is it possible to have border radius on the menu items in the primary nav? also, Is it possible to have icons on the sub menu?

[David]

Hi there,

do you want all menu items to have a border radius? Or just the ends of the nav?

This article explains way to add icons:

https://docs.generatepress.com/article/adding-icons-to-menu-items/

[Brian]

Hi David,

sorry for the delay in getting back to you, Ideally I would like it if each individual menu item had the border radius. Also, I don’t need social icons, I was thinking of arrows to the left hand side of the submenu items.

Kind Regards,

Brian Thompson

[David]

So that plugin isn’t just for adding social icons. It will also do what you need. Let me know.

So for the nav buttons this CSS:

@media (min-width: 769px) {
    .main-navigation .main-nav ul li a {
    border-radius: 20px;
    background-color: rgba(255,255,255,0.85); /* Change color for menu buttons */
    margin-right: 2px;
    }
    .main-navigation {
        background-color: transparent;
    }
}

It overrides the static menu item colors set in the Customizer, the current and hover colors still apply though. Just a note, the nav doesn’t have a lot of room to breath. So increasing the margin (gap) between buttons will cause the menu to drop below the site logo.

[Brian]

Hi David,

Thanks For That.

Kind Regards,

Brian Thompson

[David]

You’re welcome

[Brian]

Hi,

Sorry to bring this issue back up again, but I was trying to fix a problem with the search bar and text typed into the search bar but when I go into the mobile view, there is no background colour, Could you please tell me what I did wrong?

Sorry again,

Brian

[David]

It looks autoptimize is throwing some issues with the CSS.
Can you go into its settings and uncheck Also aggregate inline CSS then clear the cache and let me know.

[Brian]

Hi David,

Thanks For that, I think its ok there now. I am also trying to change the colour of the input text on the search bar to black, but I don’t know where to go for that. Could you show me please?

[David]

So the CSS you have that is targeting the nav search update it to this so it includes the search when it is in focus:

.navigation-search input[type="search"], .navigation-search input[type="search"]:focus  {
    color: #0B0B0B;
    background-color: #ffffff;
}

[Brian]

Thanks David,

By the way, Happy new year!

[David]

You’re welcome and Happy New Year !

[Author]

Posts