Docs

[Marco C]

Hi people,

I’d like the sub-menus for dev.visitpaddington.com.au to inherit the respective menu item background colour.

I understand that using something like:

.x-navbar .sub-menu {
  background-color: #fafafa;
}

will give all sub-menus background the desired #fafafa colour background. My menu items backgrounds have different colours though…

What’s the suggested solution for my case?

Thank you for your help,

Marco

[Rue Nel]

Hello Marco,

Thanks for writing in! To inherit the background colors of your sub menu item from their respective parent menu item, you would need to update your custom css code and add the background colors to your sub menus. You can make use of this code:

/** PRECINCTS menu item **/
.x-navbar #menu-topnav li.menu-item-123 > a {
	border-bottom: 8px solid white;
	border-right: 4px solid white;
    background-color: rgba(255, 204, 0, 0.7)
}

.x-navbar #menu-topnav li.menu-item-123 > a:hover {
	background-color: rgb(255,204,0);
}

.x-navbar #menu-topnav li.menu-item-123 > .sub-menu {
	background-color: rgb(255,204,0);
}

.x-navbar #menu-topnav li.menu-item-123 > .sub-menu a{
	color: #000;
}

/** WTD menu item **/
.x-navbar #menu-topnav li.menu-item-144 > a {
	border-bottom: 8px solid white;
	border-left: 4px solid white;
	border-right: 4px solid white;
    	background-color: rgba(157, 222, 224, 0.7)
}

.x-navbar #menu-topnav li.menu-item-144 > a:hover {
	background-color: rgb(157,222,224);
}

.x-navbar #menu-topnav li.menu-item-144 > .sub-menu {
	background-color: rgb(157,222,224);
}

.x-navbar #menu-topnav li.menu-item-144 > .sub-menu a{
	color: #000;
}

/** NEWS menu item **/
.x-navbar #menu-topnav li.menu-item-155 > a {
	border-bottom: 8px solid white;
	border-left: 4px solid white;
	border-right: 4px solid white;
    	background-color: rgba(20, 198, 204, 0.7)
}

.x-navbar #menu-topnav li.menu-item-155 > a:hover {
	background-color: rgb(20,198,204);
}

.x-navbar #menu-topnav li.menu-item-155 > .sub-menu {
	background-color: rgb(20,198,204);
}

.x-navbar #menu-topnav li.menu-item-155 > .sub-menu a{
	color: #000;
}

/** EVENTS menu item **/
.x-navbar #menu-topnav li.menu-item-156 > a {
border-bottom: 8px solid white;
	border-left: 4px solid white;
	border-right: 4px solid white;
    	background-color: rgba(225, 26, 182, 0.7)
}

.x-navbar #menu-topnav li.menu-item-156 > a:hover {
	background-color: rgb(225,26,182);
}

.x-navbar #menu-topnav li.menu-item-156 > .sub-menu {
	background-color: rgb(225,26,182);
}

.x-navbar #menu-topnav li.menu-item-156 > .sub-menu a{
	color: #000;
}

/** VISIT US menu item **/
.x-navbar #menu-topnav li.menu-item-160 > a {
	border-bottom: 8px solid white;
	border-left: 4px solid white;
	border-right: 4px solid white;
    	background-color: rgba(209, 190, 113, 0.7)
}

.x-navbar #menu-topnav li.menu-item-160 > a:hover {
	background-color: rgb(209,190,113);
}

.x-navbar #menu-topnav li.menu-item-160 > .sub-menu {
	background-color: rgb(209,190,113);
}

.x-navbar #menu-topnav li.menu-item-160 > .sub-menu a{
	color: #000;
}

Please let us know if this works out for you.

[Marco C]

IT WORKED A CHARM!!! Thank you.

I’ve just updated CSS code: would you be so kind to help me align the submenu with the menu item background?

I’ve tried a

.x-navbar #menu-topnav li.menu-item-123 > .sub-menu {
	background-color: rgb(255,204,0);
        border-right: 4px;
}

But it’s only working on the first menu element…

Thank you again!

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

.masthead-stacked .x-navbar .desktop .sub-menu {
    left: 4px;
    right: auto;
}
.x-navbar #menu-topnav li.menu-item-123 > .sub-menu {
    background-color: rgb(255,204,0);
    left: 0;
}

Hope that helps.

[Author]

Posts