Mobile sidemenu customization

Hello,

Thank you for your help.

My website is mainly black and white.
I would like to edit the side bar menu on mobile which looks weird to me.

1) make the “SERCH BAR” at the same height as the menu
2) make background of menu white as the search bar not a light grey like now
3) remove the grey hover and black part when selecting an submenu
4) possible to put the font of the submenu in black not grey
5) remove the grey border which separate the menu
6) remove the shadow behing the search bar

Thank you for your help as always,
Please find attached 2 screenshots of the menu.

Sincerely,
Romain

Hello,

Have you enabled “Dark theme” in the Theme Settings > styles and colors?
Please, provide your site admin access to the private area.

Best Regards

No Dark theme is turn off,
hoever I cannot give you the connexion as I don’t have

Hello,

Please enable the Dark mode and then check what requires customization.

Best Regards

Hey,

I just tried but cannot leave it like this for my client.
All background in black on mobile and desktop. The menu is all black on mobile. I want the same all black mobile menu but in white.

Want remove the black square which is in background of the arrow in mobile menu.

As on picture.

Sincerely,
Romain

Hello,

You can disable the dark mode and customize the mobile menu as per your needs. Our support does not cover site customization, we can guide how to do it and or give you base code.

You will need to add this code to the Theme Settings > Custom CSS and set the colors as per your needs:

body .mobile-nav {
	background-color: grey;
}

body .site-mobile-menu li a {
	color: red;
}

body .mobile-nav .searchform input[type=text] {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: rgba(255,255,255,.5);
    color: orange;
}

body .mobile-nav .mobile-nav-tabs .active {
	background-color: rgba(0,0,0,.3);
    color: orange;
}

body .mobile-nav-tabs .mobile-tab-title {
	color: red;
}

body .mobile-nav  .searchform .searchsubmit {
	color: white;
}

body .mobile-nav .searchform .searchsubmit:before {
	  border-color: rgba(255,255,255,.4);
    border-left-color: orange;
}

body .mobile-nav-tabs {
	background-color: rgba(0,0,0,.9);
}

body .mobile-nav .icon-sub-menu {
	color: orange;
}

body .mobile-nav .sub-menu-dropdown {
	background-color: #101010;
}

body .mobile-nav .site-mobile-menu .sub-menu li a {
	color: rgba(255,255,255,.8);
}

body .mobile-nav .create-nav-msg {
	color: rgba(255,255,255,.8);
}

body .mobile-nav .site-mobile-menu li a:hover {
	color: white;
}

body .mobile-nav .search-results-wrapper .woodmart-scroll {
	 background-color: #101010;
}

body .mobile-nav .product-title,
body .mobile-nav .amount{
	color: white;
}

body .mobile-nav .autocomplete-suggestion:hover {
	background-color: rgba(0,0,0,.3);
}

body .mobile-nav .view-all-products {
	    background-color: rgba(0,0,0,.3);
    color: #fff;
}

body .mobile-nav .view-all-products:hover {
	background-color: rgba(0,0,0,.9);
}

Best Regards

Hello,

Thank you for your help
I check all the code you provide me and put in place those one:

body .site-mobile-menu li a {
	color: black; font-weight: bold;
}
body .mobile-nav  .searchform .searchsubmit {
	color: white;
}
body .mobile-nav .site-mobile-menu .sub-menu li a {
	color: rgba(0,0,0,.8);
}

However most of the issue I have could not be solved with the codes

1) make the “SEARCH BAR” at the same height and same size as the menu
2) remove the shadow below the search bar
3) remove the grey hover background of the results of search bar
4) remove the grey grey background when a menu is selected
5) remove the grey border which separate the menus
6) remove the black arrow on menu

Could you help me with that ?

Sincerely,
Romain

Hello,

Please add this custom CSS:

body .searchform input[type="text"]  {
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    line-height: 1.2;
}
body .mobile-nav .searchform {
    box-shadow: none;
}
body .mobile-nav .searchform input[type="text"] {
    height: 60px;
}
body .wd-nav-mobile li a {
    border-bottom: none;
}

4) remove the grey grey background when a menu is selected = there is no gray background now.
6) remove the black arrow on menu = you need to remove sub-menu items or mega-menu blocks from the mobile menu.

Best Regards

Hello,

Thank you it works perfectly.

4) Yes when a primary menu is selected like “Nike” on the first picture. The background is grey. Moreover there is a black square. Would it be possible to make everything white ?

5) All the grey border disappear but not the vertical.

Thank you for all.

Sincerely,
Romain

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .mobile-nav .wd-nav-opener {
    border-left: none;
}
body .wd-nav-mobile li:active > a,
body .wd-nav-mobile li.opener-page>a{
    background-color:transparent;
}
body .mobile-nav .wd-nav-opener.wd-active {
    background-color: transparent;
	color:black;
}

Best Regards

Hello,

Thank you very much. It works amazing.

Have a great day

We are always happy to help you, write to us when you have any difficulties or issues with our theme.

We would be grateful for 5 stars rate on http://themeforest.net/downloads in case you are satisfied with our theme and customer service

Thank you in advance

[Author]

Posts