Yes, that CSS is there but whatever is changed on it affects both the navigation bar search box and the content custom search widget. Below is the CSS for the home page content custom search widget. Is anything is this customization affecting the navigation search box? It was working correctly for several years up until the latest version of Enfold. I don’t know what changed, but rolling back to previous versions of Enfold in a staging area corrects it.

#chsearchbox {
position: relative;
background-color: transparent!important;
margin-top: -15px;
z-index: 55;
border: none!important;
}
#search-3 #s {
left: 35px;
content: url(‘https://riseandshine.childrensnational.org/wp-content/uploads/2017/07/ch-search-icon.png’);
width: 85%;
margin: -32px auto !important;
padding: 41px;
border: none!important;
box-shadow: 0px 5px 15px 0px #cccccc;
}
#search-3 .avia-font-entypo-fontello {
background-image: url(https://riseandshine.childrensnational.org/wp-content/uploads/2017/07/ch-search-icon.png);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
background-color: transparent!important;
width: 67px!important;
}
#search-3 #searchform #searchsubmit {
_font-size: 2.5em; /*set the size of the magnifying icon*/
font-size: 1.5em;
color: transparent;
}
#search-3 input[type=”text”] {
font-size: 30px; /*set the size of the search box input font*/
}
#search-3 .button {
left: 95px;
}
#searchsubmit .avia-font-entypo-fontello {
display: none!important;
}

That’s helpful, thank you…I just adjusted the font sizes and the caption title and content are better now, but still running off the bottom of the image…And what about adjusting the slider’s image size for mobile so it runs full height? (I’d like the image to reach to the bottom of the screen.)

• This reply was modified 10 months ago by dryo1.

Hi Ismael and thanks for your quick reply.

I’ve added the CSS code you sent me in the Quick CSS panel, but that didn’t make any changes to the mobile menu.

In the Advanced Styling Menu –> Menu Links in overlay/slide out , the font size is set to 90 px and on desktop it looks fine, but it seems to be 90 px on mobile view aswll despite adding the CSS code.

I’ve attached the login credentials in Private Content if you want to take a closer look youself.

Thank you. I can Google.

Again, what I ask you is to know the proper settings in the Enfold theme for the best speed. Performance And Optimization . “ Don’t you have any tutorials on how to see these settings?” could help me here?

Why am I getting excessive DOM on every page? Did you even look at the Page Speed Insights? I saw you look at someone else’s and gave them extensive help so I added the link in.

I ADDED IN THE PLUG IN AND RAN A TEST.

Largest Contentful Paint element 7,130 ms
Defer offscreen images Potential savings of 493 KiB
Reduce initial server response time Root document took 1,430 ms
Serve images in next-gen formats Potential savings of 97 KiB
Eliminate render-blocking resources Potential savings of 160 ms
Reduce unused CSS Potential savings of 56 KiB
Ensure text remains visible during webfont load
Avoid serving legacy JavaScript to modern browsers Potential savings of 9 KiB
Reduce unused JavaScript Potential savings of 100 KiB
Avoid an excessive DOM size 1,071 elements.

I spoke to a man who wants thousands of dollars to speed up this website. (I do not make any money off of this. My art is and my advise my gift to the world) which is way too much … its only slow on MOBILE… he MENTIONED AVIA FILES INSTEAD OF Jpeg. Do you have any information on usith this in Enfold?

I don’t think the plug in did anything.

anything you can do to help would be appreciated.

• This reply was modified 10 months ago by extraeyes.
• This reply was modified 10 months ago by extraeyes.

I also added the burger menu font size, but it didn’t make the font smaller on mobile.

And do you know how I can adjust the Burger menu font size? It seems a little big.

Hi Guenni007,

It’s not about shrinking header the problem now, it is about the CSS codes for mobile and tablets which is not applied on my site, I don’t understand what happen ?

I added several CSS codes for mobile and tablets but they are not taken into account:

/* 📱 MOBILE (jusqu'à 768px) */

@media only screen and (max-width: 768px) {

  /* Add your Mobile Styles here */
  .responsive #header_main_alternate {
    display: block;
  }

  .responsive #top #header .main_menu {
    width: auto !important;
  }

  #header_meta .phone-info-custom::before {
    background-color: #ffffff !important;
  }
    .responsive #top #wrap_all .main_menu {
        left: 0px !important;
    }
    .responsive #top .logo {
        width: 50% !important;
    }

.responsive #top #wrap_all .container {
    float: right !important;
}

#header_meta .phone-info-custom {
    font-size: 15px;
    font-weight: 800;
    color: #000000;
    padding-top: 70px;
}
#header_meta .container {
     max-width: 50% ;
    margin-left: 0px;
    margin-right: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

/*PHONE INFO*/
#header_meta .phone-info-custom::before {
  display: none !important;
}
.phone-info {
    padding-top: 5px !important;
}

/*LOGO*/
.responsive .logo img {
    float: right !important;
}

    .responsive #top .logo {
        position: static;
        display: table;
        height: 80px!important;
        float: none;
        padding: 0;
        border: none;
        width: 95%;
}
.main_menu {
    margin-left: 0px !important;
}
a {
    padding-left: 0px !important;
}
@media only screen and (max-width:767px) {
    .responsive #top #header_main > .container .main_menu .av-main-nav > li > a {
        padding-left: 0;
    }
}}

/* 💻 TABLETTE (entre 769px et 1024px) */
@media only screen and (min-width:768px) and (max-width:989px) {
    .responsive #top #wrap_all .av_mobile_menu_tablet .main_menu {
        left: 0 !important;
    }
}