Enfold Header/Logo Layout

Hi Basilis,

Thank you for your answer and suggestion, but I found using the image banner/logo as a background crops the image at different screen sizes and the client will not accept this. Unless I have missed the right set up option this will not work in this instance.

I have found the most acceptable way to adapt the old layout design into Enfold is to have a 1px high white logo and the menu option to show below the logo area and add the logo/banner in a fullwidth layer slider on each page…please link

Is there a way to reduce the logo area to 0px as the lowest default setting seems to be 45px?

by using the browser insector I can edit what I am looking for…
But if I paste adjustments like this into the quick css it seems to refresh with another piece of code making me think there are many places where this particular css is located.

#top #header_main > .container, #top #header_main > .container .main_menu .av-main-nav > li > a, #top #header_main #menu-item-shop .cart_dropdown_link {
/* height: 45px; */
/* line-height: 45px; */
}
#top #header_main > .container, #top #header_main > .container .main_menu .av-main-nav > li > a, #top #header_main #menu-item-shop .cart_dropdown_link {
/* line-height: 45px; */
}
#header_main .container, .main_menu ul:first-child > li a {
/* line-height: 88px; */
}
#header_main .container, .main_menu ul:first-child > li a {
/* height: 88px; */
/’ line-height: 88px; */
}
#top #header_main > .container, #top #header_main > .container .main_menu .av-main-nav > li > a, #top #header_main #menu-item-shop .cart_dropdown_link {
/* height: 45px; */
/* line-height: 45px; */
}
#header_main .container, .main_menu ul:first-child > li a {
/* height: 88px; */
/* line-height: 88px; */
}

Most thankful if you can help with this.
Br
Nick

Hi Ismael,

Thank you for your reply. I have found adding the banner as a background in the header does not seem to work as the banner image gets cropped at differing screen sizes and there is important information on the right of the banner image that the client wants visible. Is there a way to set a responsive background?
Otherwise, having the “logo banner” in a slideshow seems to be the best solution, I have found…I would just like some advice on how to minimise the custom header settings to lower than 45px i.e. to 1px.

Many thanks
Nick

Hi Ismael,

Thank you for the code, I placed this in the Enfold quick CSS, general styling section. Please advise me further as this did not work.
Is it that I should edit a certain CSS file?

When I use Chromes inspector to get the desired result I need to add more CSS adjustments…I add these too to the quick CSS section but still when I refresh the page another piece of CSS needs adjusting???

Here are some examples;
**********************************************************************

#top #header_main > .container, #top #header_main > .container .main_menu .av-main-nav > li > a, #top #header_main #menu-item-shop .cart_dropdown_link {
/* height: 45px; */
/* line-height: 45px; */
}

#header_main .container, .main_menu ul:first-child > li a {
/* height: 88px; */
/* line-height: 88px; */
}

#top #header_main > .container, #top #header_main > .container .main_menu .av-main-nav > li > a, #top #header_main #menu-item-shop .cart_dropdown_link {
/* height: 45px; */
/* line-height: 45px; */
}

#header_main .container, .main_menu ul:first-child > li a {
/* height: 88px; */
/* line-height: 88px; */
}

#top #header_main > .container, #top #header_main > .container .main_menu .av-main-nav > li > a, #top #header_main #menu-item-shop .cart_dropdown_link {
/* height: 45px; */
/* line-height: 45px; */
}

#header_main .container, .main_menu ul:first-child > li a {
/* height: 88px; */
/* line-height: 88px; */
}

.html_header_top.html_header_sticky #top #wrap_all #main {
padding-top: 83px;
}

#header_main .container, .main_menu ul:first-child > li a {
/* height: 88px; */
/* line-height: 88px; */
}

.html_header_top.html_header_sticky #top #wrap_all #main {
padding-top: 83px;
}

**********************************************************************

It confuses me that each time I add another piece of code another needs adjusting – is this the wrong way to approach this or will it eventually have re-written all the CSS values needed to achieve this?

Many thanks for any advice on this.
Br
Nick