Docs

[Lance B]

I’ve seen you give CSS to do some really cool things with the menu. I’ve been trying but can’t seem to do what I think is pretty simple. Take a look at my menu and hover over the selection “POWERFUL”:

advancedbiology.com

What I want it to look like is this, hover over “Tools & Accessories” on the menu on this site:

bluemercury.com

It’s really just a matter of getting the main menu selection to have a border effect on 3 sides that matches the border effect on the submenu. It’s very effective and less confusing that way and I figured out the CSS for the submenu, but I can’t seem to work out the CSS issue on the main menu hover. Also, I have an annoying border across the top of the submenu for some reason.

Thank you for your help!

[Paul R]

Hi Lance,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer.

body .x-navbar .desktop .x-nav>li>a>span {
    position: relative;
    padding: 20px 20px 30px;
}

body .x-navbar .desktop .x-nav>li>a>span:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
   
    z-index: 5;
}

body .x-navbar .desktop .x-nav>li>a:hover span {
    box-shadow: 0 6px 0px 0px #fff, 0 0 0 1px rgba(153,153,153, 0.1), 0 1px 10px rgba(153,153,153, 1), 0 1px 10px rgba(153,153,153, 0.1);

}

body .x-navbar .desktop .x-nav > li > a {
    padding-top:21px;
    padding-left:0;
    padding-right:0;
}

Hope that helps

[Lance B]

Hmmm. That didn’t do it. I know you know what I’m trying to do as you see it all the time, and but when I either replace my code with the above code or add your code to mine I get what you see in the attached image called “yours”. I put mine back for now, but it’s also in the attached image called “mine”. My code is below, and it’s great, but it’s just not doing the border around the highlighted main menu selection hover and making it join the submenu area. Yours kind of pushed the main menu selections below the logo and then made the submenu cover the main menu selections and still didn’t add the border the the main menu hover selection. I’m probably doing it wrong. Can you check it out? Thank you so much, you guys are awesome! We’re getting a lot of traffic so I’d like to resolve it. Thanks for the great theme. Here’s the code I’m using, it’s probably not ideal and of course doesn’t handle the main menu border thing:

.x-navbar .sub-menu {
box-shadow: 0px 1px 5px rgba(100, 100, 100, 0.3);
}

.x-navbar .desktop .x-nav li>a>span:after {
content: “”;
}

.x-btn:hover, .button:hover, [type=”submit”]{
border-color: #999;
}

.desktop .x-nav .x-megamenu>.sub-menu>li>a {
font-size: 12px;
}

[Christopher]

Hi there,

Please try this code:

ul.sub-menu {
    box-shadow: 0px -10px 0px 0px #fff, 0px 0px 5px 0px rgba(153,153,153, 0.1), -1px -3px 10px -1px rgba(153, 153, 153, 1), 0px 10px 10px 0px rgba(153, 153, 153, 0.1);
}
.x-navbar .desktop .x-nav > li > a {
       height: 46px;
    padding-top: 8px;
    margin-top: 38px;
}
li.x-active > a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    box-shadow: 0 6px 0px 0px #fff, 0 0 0 1px rgba(153,153,153, 0.1), 0 1px 10px rgba(153,153,153, 1), 0 1px 10px rgba(153,153,153, 0.1);
    z-index: 5;
}

Hope it helps.

[Author]

Posts