Home Forums Basel – Premium Template Mobile Menu Customisation

This topic contains 11 replies, has 4 voices, and was last updated by Elise Noromit Elise Noromit 2 months, 1 week ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #100645

    cherryflapjack
    Customer

    Hi,

    Im not very used to using code so is there anyway to change the layout, colour and typography of the mobile menu?

    Thanks

    #100714

    Hello,

    Please describe the issue in a little bit more details and make some screenshots. If it can be done with CSS we will provide you with a custom code snippet.

    Best Regards

    #100783

    cherryflapjack
    Customer

    Hi,

    As you can see my menu is black with a large font that does not match with the website typography (Google font – Lato).

    Im hoping to get it to look like the white background example with a smaller font size. Is this possible?

    #100814

    Hi,

    Could you please reupload your screenshots in a size smaller than 512KB? Or upload it to some cloud service like Dropbox or Google Drive.

    Thank you in advance

    #100843

    cherryflapjack
    Customer

    Hi,

    Hopefully this works!

    Attachments:
    You must be logged in to view attached files.
    #100959

    Hello,

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

    body .mobile-nav {
        background-color: #ffffff;
    
    }
    body .color-scheme-dark .sub-menu li {
        color: #ffffff;
    }
    body .mobile-nav .sub-menu-dropdown ul {
         background-color: #ffffff; 
    }
    body .mobile-nav ul li a {
        font-size: 16px;
        color: #333333;
    }
    body .mobile-nav .icon-sub-menu:after, 
    body .mobile-nav .icon-sub-menu:before {
        background-color: #333333;
    }
    body .mobile-nav .searchform button {
        color: #333333;
    }
    .mobile-nav .searchform input[type=text]::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      color: #7C7C7C;
    }
    .mobile-nav .searchform input[type=text]::-moz-placeholder { /* Firefox 19+ */
      color: #7C7C7C;
    }
    .mobile-nav .searchform input[type=text]:-ms-input-placeholder { /* IE 10+ */
      color: #7C7C7C;
    }
    .mobile-nav .searchform input[type=text]:-moz-placeholder { /* Firefox 18- */
      color: #7C7C7C;
    }

    You can change the color and font-size as per your needs.

    Best Regards

    • This reply was modified 2 months, 1 week ago by Elise Noromit Elise Noromit.
    #100980

    cherryflapjack
    Customer

    Hi,

    Thanks, its worked!

    Could you please add some code to make the sub menu the same colour as its currently black too.

    Thanks 🙂

    Attachments:
    You must be logged in to view attached files.
    #101017

    Hello,

    Please replace one word in the code http://prntscr.com/m51avp

    Best Regards

    #101095

    cherryflapjack
    Customer

    Hi,

    Thanks for that, however, Ive just noticed a few other things that need to be changed.

    Green Arrow – when tapped the category title turns white and I would like it to stay black.

    Blue Arrow – font and size is different to the main menu.

    Red Arrow – The background in search is black, can this please be white.

    Orange Arrow – text in search bar turns white, can this stay black.

    Thanks again 🙂

    Attachments:
    You must be logged in to view attached files.
    #101163

    Hello,

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

    body .mobile-nav .searchform input[type=text] {
        color:#7C7C7C;
    }
    body .mobile-nav .autocomplete-suggestions {
        background-color: #ffffff;
    }
    body .mobile-nav .autocomplete-suggestions .suggestion-title {
        color:#7C7C7C;
    }
    body .mobile-nav ul li a:hover,
    body .mobile-nav ul li a:focus{
        color: #333333;
    }
    body .autocomplete-suggestions .suggestion-price span{
            color: #949494;
    }

    Remove or change this style font-size: 16px;

    Best Regards

    #101190

    cherryflapjack
    Customer

    Hi, the sub menu font and size still seems to be the same – can this be altered?

    Thanks

    #101239

    Hello,

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

    body .mobile-nav .sub-menu-dropdown li a {
        font-size: 14px;
    }
    body .color-scheme-dark .sub-menu li a {
        color: #333333;
    }

    Change the font-size as per your needs.

    Please remove this code http://prntscr.com/m5kqn1

    Best Regards

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

You must be logged in to reply to this topic.