Hi,

Could you post a link to the page in question so that we can take a closer look please? You can set the transparent logo under Enfold->Header->Transparency Options, and you can adjust the menu font size under Enfold->Advanced Styling.

Best regards,
Rikard

Hey DianaLoola73,

Thank you for using Enfold.

1.) The menu item drops when the screen width is less than 1150px. Adjust the font size and padding of the menu items for that screen size.

@media only screen and (max-width: 1150px) {
.av-main-nav > li > a {
    padding: 0 20px;
    font-size: 13px;
}
}

2.) I can’t reproduce this issue. The logo should be center aligned regardless of the screen size because of the following css code.

.html_header_top.html_logo_center .logo {
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

Best regards,
Ismael

Hi,
I see that you had the “body” font size set to 13px in the Enfold Theme Options > Advanced Styling > Body
The advanced styling typically overrides the general stylings, you also have many other fonts set there, perhaps that is the conflict.
I tested by changing the “body” to “default” in the advanced stylings and cleared my browser cache. Please check.

Best regards,
Mike

Hi,
Can you tell us which font sizes you would like and we will assist with enforcing them.

Best regards,
Mike

Hi,
When I looked at your page I found a magazine element on the bottom half of your page so I assume it is the section you are working on. To make the images larger try this code in the General Styling > Quick CSS field:

.av-magazine .av-magazine-thumbnail,.av-magazine .av-magazine-thumbnail img  {
width: 180px !important;
}

I also assume that you will want the text larger too, so try this css:

.av-magazine .av-magazine-content-wrap h3.av-magazine-title{
font-size: 3em!important;
}

Please feel free to adjust both to suit.

You may notice that the images are blurry because the magazine thumbnails are actually half the size and then scaled up to fit, to correct this please install the plugin Simple Image Sizes and go to WordPress > Dashboard > Settings > Media > Media Settings and change the size of the thumbnail size to your new size. Then use the “Thumbnail regeneration” option lower on the same page.

Best regards,
Mike

Hi,
Please try this solution for adding a down arrow to a layerslider, I have just tested to ensure that it works.
Please add a new html layer to your slide, and drag it into place and resize it to around 60px square, it doesn’t need to be exact.
Then in the layerslider content box for the html layer, please add:

<a href="#next-section" title="" class="scroll-down-link" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></a>

and save.
If you add any more layers afterwards, such as a overlay, ensure the html layer is on top so you can click it.

Best regards,
Mike

Hi,
To reduce the gutter, Please try this code in the General Styling > Quick CSS field:

#top.page-id-3370 .post-entry-3370 .av-flex-placeholder {
    width: 2% !important; 
}

currently it is set to 6% on your site, please adjust to suit.
For the blue panels, we will add padding, so the text isn’t close to the edges.

padding: 0 30px !important; 

we will also add font weight to have the Lato light, I went to Google fonts to find the correct weight number:

font-weight: 300 !important;

This is your new css with these adjustments:

#top.page-id-3370 .post-entry-3370 .av-flex-placeholder {
    width: 2% !important; 
}
#top.page-id-3370 .blue-head h3 {
font-size: 30px !important;
padding: 0 30px !important;
font-family: Lato !important; 
}
#top.page-id-3370 .blue-text p {
font-size: 20px !important;
padding: 0 30px !important; 
font-family: Lato !important; 
font-weight: 300 !important; 
}

Best regards,
Mike

Hey Rupert,
For the column padding, Please try this code in the General Styling > Quick CSS field:

#top.page-id-3370 #main .container {
padding: 0px !important;
}
#top.page-id-3370 #main .container .content {
padding: 0px !important;
}

For the blue sections, please go to and enable: Enfold Theme Options > Layout Builder > Show element options for developers
so you can add a custom class to the text blocks for the headings & text, such as “blue-head” & “blue-text”
Then you can use this code in the General Styling > Quick CSS field to adjust the font-size:

.blue-head h3 {
font-size: 30px !important;
}
.blue-text p {
font-size: 20px !important;
}

Best regards,
Mike

Hi,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

CSS Snippet:

@media only screen and (max-width: 1340px) and (min-width: 990px) { 
#top #header .avia_mega_div > .sub-menu {
    padding: 10px 15px 15px;
}
#top #header .mega_menu_title a {
    font-size: 16px
}
#top #header .avia_mega_div > .sub-menu > li > ul > li a {
    font-size: 15px;
}
#top #header .avia_mega_div > .sub-menu > li { 
    padding-top: 5px; 
}}

Best regards,
Yigit