Menu padding, left and right?

[Leif]

Hi,

How do I get the menu padding to 0 right and left as it is on this page?

https://www.thegooru.com/block-urls-with-this-chrome-extension/

[Tom]

Hi there,

Try this CSS:

.main-navigation .inside-navigation.grid-container {
    max-width: 100%;
}

[Leif]

Thanks Tom,

Works perfect, now I just need to figure out how to align the dropdown menu to the left instead of right since it went out the to much on the right .. You don´t happen to know that to .. 😉

Thanks again anyway .. =)

[Tom]

I’m not too sure what you mean? Can you show me?

[Leif]

Hi Tom,

The website is developed offline, but when I hoover the menu to show the dropdown menu it folds down and aligns to the right but I want it to align to the left instead of original so it does not go out under the window on the right side of the page, because it disapear a little bit when the menu is so far out the right.

I dont know how to explain it more.

[Tom]

Perhaps this will help?:

.main-navigation ul ul ul {
    right: 100%;
    top: 0;
    left: auto;
}

.main-navigation ul ul {
    right: 0;
    left: auto;
}

[Leif]

Hi Tom,

Perfect, that was what I needed it solved the issue perfect .. Thanks again for your support, best support of all theme authors .. =) .. You do great things for the wordpress community .. =)

[Tom]

Thank you! I appreciate that 🙂

[Max]

Hey Tom

I need to bump this Topic.

Your css works to move the third level sub menu item to the left but what about the arrow (>) at the end of the second level submenu…it still points to the right. And so it looks a bit confusing and untidy.

Is there any way to have the arrow also pointing to the left and placed at the start of the second level label to make it more user friendly.

Kind Regards

Max

[Tom]

Try this:

.dropdown-hover .children .dropdown-menu-toggle:before, 
.dropdown-hover .sub-menu .dropdown-menu-toggle:before {
    content: "\f104";
}

.sidebar .menu-item-has-children .dropdown-menu-toggle, 
nav ul ul .menu-item-has-children .dropdown-menu-toggle {
    float: left;
}

[Author]

Posts