Mobile Menu Font Colour

Hi There

I hope you are well :slight_smile:

We would like to change the current mobile menu font colour to: #3F9091 and the plus sign to: #B79B61

Our URL details are: https://www.leboramokgopa.com/, password: LEBO@2020!)

Your help is greatly appreciated

Best,
Mel

Hello Mel, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

@media (max-width: 1199px) {
    #site-navigation ul li a {
        color: #3F9091;
    }

    #site-navigation .subnav-toggle {
        color: #B79B61;
    }
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.
aThemes Support

Hi Roman :slight_smile:

Thank you so much for this, I put the code in, but something didnt work :frowning: did I do something wrong?

Best,
Mel

Hello Mel,

did I do something wrong?

Actually yes, it looks like you didn’t copy this code properly:

    @media only screen and (min-width: 1200px) {

      .site-content {

        padding-top: 100px !important;

        }

It’s missing a closing curly brace, it should look like this:

@media only screen and (min-width: 1200px) {
    .site-content {
        padding-top: 100px !important;
    }
}

Kind Regards, Roman.
aThemes Support

Hi There Roman,

Thank you so much for this. What I did was recopy and paste all the code you provided me like this:

@media (max-width: 1199px) {
    #site-navigation ul li a {
        color: #3F9091;
    }

    #site-navigation .subnav-toggle {
        color: #B79B61;
    }
}
				@media only screen and (min-width: 1200px) {
    .site-content {
        padding-top: 100px !important;
    }
}

But it still doesnt work :frowning: I am so sorry if I am messing you around I also cleared the cache so not sure why its not working :cry:

Best,
Mel

Hello Mel,

You didn’t have to copy that code once again, just replace the existing one.

Kind Regards, Roman.
aThemes Support

Hi Roman

So sorry don’t mean to frustrate you on this :frowning: I have checked so all the coding you have kindly provided to me I have put into the Custom CSS exactly like this:

@media (max-width: 1199px) {
    #site-navigation ul li a {
        color: #3F9091;
    }
}

    #site-navigation .subnav-toggle {
        color: #B79B61;
    }
}
				@media only screen and (min-width: 1200px) {
    .site-content {
        padding-top: 100px !important;
    }
}

Could you maybe please tell me which part of this is wrong? Sorry I am getting confused and it still doesn’t seem to be working (sorry I am not good at code :))

Really appreciate your help

Best,
Mel

Okay, here is your additional CSS code:

		.contact-business-form .form-control {
	font-family: "Work Sans";
	font-size: 15px;
	font-weight: 300;
	color: #191919 !important;
	border-bottom-color: #ebebeb;
	border-left: none;
	border-right:  none;
	border-top: none;
	padding-left: 0;
	padding-bottom: 13px;
	padding-top: 42px;
	margin-bottom: 15px;
	box-shadow: none;
}
.contact-business-form textarea.form-control {
		padding-top: 10px;
    padding-bottom: 0px;
	  margin-bottom: 0;
}
.contact-business-form .submit-form { position:relative;}
.contact-business-form .submit-form span { 
	position: absolute;
	z-index:10;
}
.contact-business-form .submit-form .wpcf7-submit {
	background: #188fdc;
	border: none;
	font-size: 13px;
	border-radius: 2px;
	padding: 13px 40px 14px;
}
.contact-business-form .submit-form .wpcf7-submit:hover {
	color: #fff;
}
.contact-business-form .form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #b5b5b5;
}
.contact-business-form .form-control:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #191919;
}
.contact-business-form .form-control::-moz-placeholder { /* Firefox 19+ */
  color: #b5b5b5;
}
.contact-business-form .form-control:focus::-moz-placeholder { /* Firefox 19+ */
  color: #191919;
}
.contact-business-form .form-control:-ms-input-placeholder { /* IE 10+ */
  color: #b5b5b5;
}
.contact-business-form .form-control:focus:-ms-input-placeholder { /* IE 10+ */
  color: #191919;
}
.contact-business-form .form-control:-moz-placeholder { /* Firefox 18- */
  color: #b5b5b5;
}
.contact-business-form .form-control:focus:-moz-placeholder { /* Firefox 18- */
  color: #191919;
}
.site-footer .site-info {
	display: none;
}
.business-video .elementor-widget-video .elementor-custom-embed-image-overlay img {
	display: none !important;
}
.business-video .elementor-widget-video .elementor-custom-embed-image-overlay .elementor-custom-embed-play {
	position: static;
	transform: none;
}

.business-video .elementor-widget-video .elementor-custom-embed-image-overlay i {
	display: inline-block;
	text-shadow: none;
	border-radius: 50%;
	width: 51px;
	height: 51px;
	text-align: center;
	background-color: #188fdc;
	opacity: 1;
}

.business-video .elementor-widget-video .elementor-custom-embed-image-overlay i:before {
	font-size: 18px;
	line-height: 70px;
	font-family: 'Fontawesome';
	content: 'f04b';
	display: block;
	line-height: 52px;
}
.menuStyle5 .site-header, .menuStyle5 .is-sticky .site-header {
    background-color: #000000 !important;
}
.socials i.fa {
  font-family: FontAwesome !important;
}
 @media only screen and (min-width: 1200px) {

        .site-header .site-branding {

          margin-top: -27px;

        }

        .main-navigation ul.menu > li {

          padding: 0 5px;

        }

        .main-navigation ul.menu > li:first-of-type {

          padding-left; 5px;

        }

    }
@media only screen and (min-width: 1024px) {

      .site-content {

        padding-top: 156px;

      }

    }



    @media only screen and (min-width: 1200px) {

      .site-content {

        padding-top: 100px;

      }  

    }
@media only screen and (min-width: 1200px) {

     .site-header .menu-menu-container {

        width: 100%;

      }

      .site-header .main-navigation ul#primary-menu {

        display: table;

        margin-left: auto !important;

        margin-right: auto !important;

      }

      .site-header .col-md-6 {

        -ms-flex: 0 0 66.666667%;

        flex: 0 0 66.666667%;

        max-width: 66.666667%;    

      }

      .site-header .contact-us.col-xl-2 {

        -ms-flex: 0 0 0;

        flex: 0 0 0;

        max-width: 0;

        display: none;

      }

    }
@media only screen and (min-width: 1024px) {

      .site-content {

        padding-top: 156px !important;

      }

    }



    @media only screen and (min-width: 1200px) {

      .site-content {

        padding-top: 100px !important;

      }  
    body[class*="elementor-page-"] .site-content {

      padding-bottom: 0 !important;

    }
  #masthead .socials .fa-skype::before {

/* Replace header Skype icon with Instagram icon */

    content: "\f16d";

}
.elementor-widget.elementor-widget-athemes-blog .post-content a.post-cat {

      background-color: #b79b61 !important;  

    }
	#masthead .socials .fa-skype::before {
/* Replace header Skype icon with Pinterest icon */
    content: "\f0d2";
}
.site-content {
  padding-bottom: 0 !important;
}
@media (max-width: 1199px) {
    #site-navigation ul li a {
        color: #3F9091;
    }
}

    #site-navigation .subnav-toggle {
        color: #B79B61;
    }
}
				@media only screen and (min-width: 1200px) {
    .site-content {
        padding-top: 100px !important;
    }
}
.tags-links a { 
      color: #b79b61;
    }

…please replace it with this:

.contact-business-form .form-control {
	font-family: "Work Sans";
	font-size: 15px;
	font-weight: 300;
	color: #191919 !important;
	border-bottom-color: #ebebeb;
	border-left: none;
	border-right:  none;
	border-top: none;
	padding-left: 0;
	padding-bottom: 13px;
	padding-top: 42px;
	margin-bottom: 15px;
	box-shadow: none;
}

.contact-business-form textarea.form-control {
    padding-top: 10px;
    padding-bottom: 0px;
    margin-bottom: 0;
}

.contact-business-form .submit-form {
    position:relative;
}

.contact-business-form .submit-form span { 
	position: absolute;
	z-index:10;
}

.contact-business-form .submit-form .wpcf7-submit {
	background: #188fdc;
	border: none;
	font-size: 13px;
	border-radius: 2px;
	padding: 13px 40px 14px;
}

.contact-business-form .submit-form .wpcf7-submit:hover {
	color: #fff;
}

.contact-business-form .form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #b5b5b5;
}

.contact-business-form .form-control:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #191919;
}

.contact-business-form .form-control::-moz-placeholder { /* Firefox 19+ */
  color: #b5b5b5;
}

.contact-business-form .form-control:focus::-moz-placeholder { /* Firefox 19+ */
  color: #191919;
}

.contact-business-form .form-control:-ms-input-placeholder { /* IE 10+ */
  color: #b5b5b5;
}

.contact-business-form .form-control:focus:-ms-input-placeholder { /* IE 10+ */
  color: #191919;
}

.contact-business-form .form-control:-moz-placeholder { /* Firefox 18- */
  color: #b5b5b5;
}

.contact-business-form .form-control:focus:-moz-placeholder { /* Firefox 18- */
  color: #191919;
}

.site-footer .site-info {
	display: none;
}

.business-video .elementor-widget-video .elementor-custom-embed-image-overlay img {
	display: none !important;
}

.business-video .elementor-widget-video .elementor-custom-embed-image-overlay .elementor-custom-embed-play {
	position: static;
	transform: none;
}

.business-video .elementor-widget-video .elementor-custom-embed-image-overlay i {
	display: inline-block;
	text-shadow: none;
	border-radius: 50%;
	width: 51px;
	height: 51px;
	text-align: center;
	background-color: #188fdc;
	opacity: 1;
}

.business-video .elementor-widget-video .elementor-custom-embed-image-overlay i:before {
	font-size: 18px;
	line-height: 70px;
	font-family: 'Fontawesome';
	content: 'f04b';
	display: block;
	line-height: 52px;
}

.menuStyle5 .site-header, .menuStyle5 .is-sticky .site-header {
    background-color: #000000 !important;
}

.socials i.fa {
  font-family: FontAwesome !important;
}

 @media only screen and (min-width: 1200px) {
        .site-header .site-branding {
          margin-top: -27px;
        }

        .main-navigation ul.menu > li {
          padding: 0 5px;
        }

        .main-navigation ul.menu > li:first-of-type {
          padding-left; 5px;
        }
    }

@media only screen and (min-width: 1024px) {
      .site-content {
        padding-top: 156px;
      }
    }

    @media only screen and (min-width: 1200px) {
      .site-content {
        padding-top: 100px;
      }  
    }

@media only screen and (min-width: 1200px) {
     .site-header .menu-menu-container {
        width: 100%;
      }

      .site-header .main-navigation ul#primary-menu {
        display: table;
        margin-left: auto !important;
        margin-right: auto !important;
      }

      .site-header .col-md-6 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;    
      }

      .site-header .contact-us.col-xl-2 {
        -ms-flex: 0 0 0;
        flex: 0 0 0;
        max-width: 0;
        display: none;
      }
    }

@media only screen and (min-width: 1024px) {
      .site-content {
        padding-top: 156px !important;
      }
    }

    @media only screen and (min-width: 1200px) {
      .site-content {
        padding-top: 100px !important;
      }  
}
    body[class*="elementor-page-"] .site-content {
      padding-bottom: 0 !important;
    }

  #masthead .socials .fa-skype::before {
/* Replace header Skype icon with Instagram icon */
    content: "\f16d";
}
.elementor-widget.elementor-widget-athemes-blog .post-content a.post-cat {
      background-color: #b79b61 !important;  
    }

#masthead .socials .fa-skype::before {
/* Replace header Skype icon with Pinterest icon */
    content: "\f0d2";
}

.site-content {
  padding-bottom: 0 !important;
}

@media (max-width: 1199px) {
    #site-navigation ul li a {
        color: #3F9091;
    }

    #site-navigation .subnav-toggle {
        color: #B79B61;
    }
}

.tags-links a { 
    color: #b79b61;
}

Kind Regards, Roman.
aThemes Support