3rd Tier Mobile Menu Positioning Issue

Support
#1

Hi,

I’ve been working on custom styling for my menu and I’ve got everything how I want it, the only issue is the 3rd level navigation links need slightly more margin/padding at the top as they don’t currently line up properly.

I can’t seem to target these with CSS without affecting the other 2nd level nav’s too.

See screen shot:

I’ve provided logins in a private note underneath.

I’ve looked throughout the forum and haven’t found an answer to this specific issue.

I am using this code to style the nav’s at present:

/* Sub-menu Styling */

.desktop .sub-menu {
left: 0 !important;
}

.desktop .sub-menu .sub-menu {
left: 100% !important;
}

.x-navbar ul.sub-menu{
background: #f2f3f5 !important;
}

.x-navbar .desktop .sub-menu {
padding-left: 0;
padding-right: 0px;
padding-top: 0;
padding-bottom: 0;
}

.x-navbar .x-nav .sub-menu a {
font-size: 16px;
background-color: #f2f3f5;
}

.x-navbar .sub-menu a:link {
color: rgb(134, 186, 94);
}

.x-navbar .x-nav .sub-menu a {
font-size: 16px;
}

.x-navbar .sub-menu a:link {
color: #212121;
padding-left: 10px;
padding-right: 10px;
}

.x-navbar .sub-menu a:hover {
background-color: rgb(134, 186, 94);
}

.x-navbar .sub-menu a:link {
color: #ffffff;
}

.x-navbar .desktop .sub-menu li > a:hover {
color: #ffffff;
}

Any thoughts on how I could adjust this to line up properly?

Thanks,

Dan

1 Like
#2

Hi There,

Please also add this CSS:

.masthead-inline .x-navbar .desktop .sub-menu .sub-menu {
    top: 0;
}

Hope it helps :slight_smile:

1 Like
#3

Hi,

Thanks for the response, that worked perfectly.

As always, keep up the great work!

Thankyou

Dan

#4

We’re delighted to assist you with this Dan.

Cheers!

1 Like