Mobile menu color background, font type and color change

Dear Team,

I am really satisfied with the Theme!

I just have a problem to customize the mobile menu. Even I have already found some topic with some valuable css code, but its not working properly somehow.

I used this code to customize the mobile menu:

div.mobile-nav .sub-menu-dropdown ul:before {
    content: none;
}

div.mobile-nav,
div.mobile-nav .sub-menu-dropdown ul{
   background-color: #ffe8ed;
   color: #000000;
}

.mobile-nav ul li a {
  color: rgba(0, 0, 0, 1);
}

div.mobile-nav ul li.current-menu-item>a {
    color: #000000;
}

div.mobile-nav ul li a:active {
        background-color: rgba(255, 169, 144, 1);

I would like to have the pink background with black font. But the Font should be the type “quicksand” and I would like to change the size of it.

Also some elements are still white instead of black. The product search bar and some arrows underneath are still white.

I attached a screenshot, so you can understand what I mean.

I really hope you will help me and provide me a good code 🙂

Kind Regards

Marcel Wery

Attachments:

You must be logged in to view attached files.

Hello,

Thank you so much for purchasing our theme and contacting our support center.

Try to replace your code snippet with the following code and add it to the Custom CSS area in Theme Settings. You can control your mobile menu font size by first CSS selector body .mobile-nav ul li a.

body .mobile-nav ul li a {
    font-size: 16px;
}

body div.mobile-nav,
body  div.mobile-nav .sub-menu-dropdown ul {
    background-color:#FEE7ED;
}
body  div.mobile-nav ul li a {
    color:black;
}
body  div.mobile-nav ul li a:hover {
    color:black;
}
body  div.mobile-nav .menu-item-has-children .icon-sub-menu {
    height:50px;
    background-color: transparent;
}
body  div.mobile-nav .icon-sub-menu:after,
body  div.mobile-nav .icon-sub-menu:before {
    background-color:black;
}
body  div.mobile-nav .sub-menu-dropdown ul:before {
    content: none;
}
body  div.mobile-nav .searchform {
    border-bottom: 2px solid rgba(180, 180, 180, 0.43);
}
body  div.mobile-nav .searchform input[type=text] {
    border: 1px solid rgba(129,129,129,.25);
    color:black;
}
body .mobile-nav .searchform  ::-webkit-input-placeholder {color:rgba(0,0,0,0.6)}
body .mobile-nav .searchform  ::-moz-placeholder   
{color:rgba(0,0,0,0.6)}/* Firefox 19+ */
body .mobile-nav .searchform  :-moz-placeholder           {color:rgba(0,0,0,0.6)}/* Firefox 18- */
body .mobile-nav .searchform  :-ms-input-placeholder      {color:rgba(0,0,0,0.6)}
body .mobile-nav .searchform button {
    color:black;
}

Kind Regards
XTemos Studio

Dear Team,

thank you for your reply to my request. I tried the code you have send me and its working fine except of one thing. The background color should be: ffe8ed and not black. Actually just like the rest of my pages color 🙂
Will you help me with that one more time?

Kind Regards

Marcel Wery

Attachments:

You must be logged in to view attached files.

Hi,

The custom code that we have provided already contain styles with a pink background (http://prntscr.com/kzrt40), but part of your previous custom code inserted with errors (https://prnt.sc/kzrqts) so the next section of the code is not working correctly.

Regards

Dear Team!

Thank you a lot!!! You have been right, it was my mistake, the code is working perfect!

Have a nice weekend!

Kind Regards

Marcel Wery

Thank you! Have a nice weekend too.

[Author]

Posts