Home › Forums › WoodMart support forum › Mobile sidemenu customization

Mobile sidemenu customization

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • July 22, 2021 at 4:20 pm #308148

    romain
    Participant

    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

    July 23, 2021 at 12:07 am #308207

    Elise Noromit
    Member

    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

    July 23, 2021 at 8:49 am #308259

    romain
    Participant

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

    July 23, 2021 at 12:43 pm #308329

    Elise Noromit
    Member

    Hello,

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

    Best Regards

    July 23, 2021 at 2:36 pm #308382

    romain
    Participant

    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

    July 24, 2021 at 9:02 am #308464

    Elise Noromit
    Member

    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

    July 25, 2021 at 1:39 pm #308608

    romain
    Participant

    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

    July 26, 2021 at 10:26 pm #308906

    Elise Noromit
    Member

    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

    July 27, 2021 at 10:01 am #309019

    romain
    Participant

    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

    July 27, 2021 at 11:36 pm #309157

    Elise Noromit
    Member

    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

    July 27, 2021 at 11:39 pm #309158

    romain
    Participant

    Hello,

    Thank you very much. It works amazing.

    Have a great day

    July 28, 2021 at 7:52 am #309209

    Elise Noromit
    Member

    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
Viewing 12 posts - 1 through 12 (of 12 total)