Mega Menu Styling

Kind of related to this, you will see that I have editing a piece of Davids CSS, to create a Black background when you hover over the main Navigation items. Problem is, I cant get it to sit behind the text and would also like rounded ends.

You can play around with the z-index value.

Are you aiming for something like this?
https://share.getcloudapp.com/OAunbJ17

If yes, you can add z-index: -1; to the pseudo element styling you've added.

Finally, is there a way I can change the angle of the Search Magnifying Glass?

Can you show a mock-up image of how you want it to be laid out?

.main-navigation .main-nav > ul > li.search-item > a you can use this as a selector for the search icon if you want to style it specifically.

Alternatively, you can exclude it from styling by changing the existing selector you're using to something like this.

.main-navigation .main-nav > ul > li:not(.search-item) > a

Hey Elvin,
The z-index thing worked great, thanks.

How can I round the outside corners of the Mega Menu?

Try this CSS:

nav .main-nav .mega-menu > ul.sub-menu {
    border-radius: 10px;
}

Adjust the value to your preference. :)

Hey Elvin,

Can you show a mock-up image of how you want it to be laid out?

.main-navigation .main-nav > ul > li.search-item > a you can use this as a selector for the search icon if you want to style it specifically.

Alternatively, you can exclude it from styling by changing the existing selector you’re using to something like this.

.main-navigation .main-nav > ul > li:not(.search-item) > a

Did you get the mock up link I sent? I've attached again.

I tried adding the css above, but nothing happened.
Cheers

I have done a mock up of how I would like the search to look and have added some more CSS to round off the ends.
Just can't get the search where I want it.

Hi there,

Elvins border-radius CSS is working - you may just want to increase the 10px to make it more noticeable.

Search Design - can't give you something that would achieve that design exactly - as that would take custom development. But this CSS will reposition the search field and add the border and rounded corners.

.navigation-search.nav-search-active {
    top: 100%;
    border-radius: 50px;
    overflow: hidden;
    background-color: #000 !important;
    border: 10px solid #000;
}
.navigation-search.nav-search-active input {
    height: 60px;
}

Hey David, that is absolutely spot on, thanks so much.
One quick question, is there a way to adjust the angle of the magnifying glass?

You can add a specific style to the search-item like so:

@media (min-width: 769px) {
    .main-navigation .main-nav > ul > li.search-item > a {
        transform: rotate(-52deg);
    }
}

Perfect, thanks David.

You're welcome