Hi,

Please use the following code in Quick CSS.

To change the background color of menu area:

#header_main_alternate {
background-color: green;
color:white ;
}

To change the font size of menu

.av-main-nav > li > a {
font-size: 15px !important;
}

To make the menu center aligned, please go to Enfold > Header and under Menu and Logo Position, choose “logo center, menu below”. Then add following code to Quick CSS in Enfold theme options under General Styling tab:

.html_header_top.html_logo_center .logo { left: 0; }

Alternatively, you can keep your current header layout, and use this instead:

nav.main_menu {
  left: 25% !important;
}

Best regards,
Sarah

Hey mleite1,

Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

.avia-section-huge .content {
  padding-top: 40px;
  padding-bottom: 40px;
}

If you need further assistance please let us know.

Best regards,
Victoria

Hi LifeIsNow001,

The mess is created by adding those links with the telephone. LOOKS like too many are there in html. Try removing the extra ones. The logo image is not in a correct container also.
Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

..main_menu {
    top: 0;
}

If you need further assistance please let us know.
Best regards,
Victoria

Hey foxp3,

Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

@media only screen and (max-width: 450px) {
  #top .avia-slideshow-button {
    margin-top: 0;
  }
  .slideshow_align_caption {
    vertical-align: top;
  }
}

Let me know how do you like this suggestion :)
If you need further assistance please let us know.
Best regards,
Victoria

Hi,

I still don’t see the search icon there. But here are the styles for mobile with room left for the icon:

@media only screen and (max-width: 450px) {
.responsive #top ul#menu-item-shop.cart_dropdown,
 .responsive #top #menu-item-shop.cart_dropdown li {
  width: 50px;
  height: 80px;
  min-width: 50px;
  margin-right: 70px;

}
}

Best regards,
Victoria

Hi bitojoe,

On the screenshot in private you van see elements and animation applied, you can override it via css:

.avia_sortable_active .isotope {
    -webkit-transition: height 0.5s 0.2s cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transition: height 0.5s 0.2s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

Best regards,
Victoria

Hey mleite1,

I noticed that one line ends with an exclamation mark instead of a semicolon, and there are spaces where there shouldn’t be. This may be why your CSS isn’t working. Please use this code instead:

.testsh .av-special-heading-tag {
     font-family: “PT Sans”, “HelveticaNeue”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
     font-size: 22px !important;
     font-style: italic;
     font-weight: bold;
     line-height: 1.5em;
     margin-bottom: 8px;
     margin-top: 43px !important;
     padding-right: 6px !important;
     text-align: left !important;
}

and see if that fixes it! If one of the attributes don’t work, try adding a !important before the semicolon, just make sure that there’s no space after the exclamation mark, and that you retain the semicolon! :)

Let us know if you need further help.

Best regards,
Sarah

Hey garyhsueh,

To solve your problem, just add the following custom CSS code:

.logo img {
  margin-top: 10px !important;
}

Best regards,
John Torvik