Home Forums WoodMart – Premium Template Mobile sidemenu customization

This topic contains 11 replies, has 2 voices, and was last updated by Elise Noromit Elise Noromit 4 days, 3 hours ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #308148
    romain
    romain
    Customer

    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

    Private Content Hidden
    #308207

    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

    #308259
    romain
    romain
    Customer

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

    #308329

    Hello,

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

    Best Regards

    #308382
    romain
    romain
    Customer

    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

    #308464

    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

    #308608
    romain
    romain
    Customer

    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

    Private Content Hidden
    #308906

    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

    #309019
    romain
    romain
    Customer

    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

    Private Content Hidden
    #309157

    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

    #309158
    romain
    romain
    Customer

    Hello,

    Thank you very much. It works amazing.

    Have a great day

    #309209

    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

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.