Mobile submenu background fill color

Support
#1

Hi again,

This time I’m stuck with filling the backgroundcolor of the mobile submenu all the way without whitespaces and white lines between submenu-items.

Hope you can help me with this as well. I added one screenshot of how it looks currently and one of how I want it to look.

Also I would like to add those white arrows at the end of each submenu-item.

Thanks in advance!

#2

The red arrows point to the whitespaces which needs to be removed, the green one points to the white space of the navbar which can stay white.

#3

BTW, I’ve just upgraded to the pro version. Will all the customizations and cornerstone content stay as it is when I convert it to pro?

#4

Hi There @sitepower

Thanks for writing in! Could you please try adding the following CSS rule into your X -> Theme Options -> CSS area and see if that helps.

@media(max-width:480px){
  .x-navbar .x-container.max.width {
    width: 100% !important;
  }
  .x-navbar .mobile .x-nav {
    margin: 0;
  }
}

Hope that helps.

1 Like
#5

Unfortunately it only helps a little bit. Because I want to keep a margin of 20px left and right, I can only remove the whitespace on top and bottom with this option (with margin-top 0; and margin-bottom: 0;).

And the white horizontal lines between the different menu items are still there as well.

Any ideas how to add those “>” at the right side of each submenu item? If at all possible.

I am waiting to install the pro version before I know for sure it won’t mess things up.

Thanks for your time.

#6

Hi There,

Please add this to Theme Options > CSS

@media (max-width: 979px) {
	/*fullwidth dropdown*/
	.x-navbar .x-container.max.width {
		width: 100%;
	}
	/*background for the items and side paddings*/
	.x-navbar .x-nav li.menu-item {
		background-color: #e0922e;
		padding-left: 5%;
		padding-right: 5%;
	}
	/*remove the white lines on items*/
	.x-navbar .mobile .x-nav li>a {
		border-width: 0;
	}
	/*add > for each menu item*/
	.x-navbar .mobile .x-nav li>a:after {
		content: ">";
		float: right;
	}
	/*left margin for the logo*/
	a.x-brand.img {
		margin-left: 5%;
	}
}

It won’t mess things up, but there will be a few things that need adjustment, you also need to change your x-child theme to pro-child theme and moved your modifications in there.

How To Setup Child Themes

Hope it helps,
Cheers!

2 Likes
#7

Hi @friech,

Thanks so much. Now it looks how I want it! You guys rock! :thumbsup: Thanks for adding the comments as well!
I will backup my files and try to go pro.

Cheers!

#8

Glad to hear it helps. :slight_smile:

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.