Mobile Menu Customisation

Hi,

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

Thanks

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

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?

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

Hi,

Hopefully this works!

Attachments:

You must be logged in to view attached files.

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

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.

Hello,

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

Best Regards

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.

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

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

Thanks

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

[Author]

Posts