Nav Menu

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/

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

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.

Hi David,

Thanks For That.

Kind Regards,

Brian Thompson

You're welcome

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

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.

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?

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;
}

Thanks David,

By the way, Happy new year!

You're welcome and Happy New Year !