Changes to CSS

Hey Lene,

Thank you for the inquiry.

1.) We could use this css code to adjust the color of the icons.

.responsive #top #header #header_main .inner-container .widget > div .fa-phone {
	color: red;
}

.responsive #top #header #header_main .inner-container .widget > div .fa-envelope {
	color: blue;
}

2.) And this css to increase the size of the logo.

.responsive #top #header #header_main .inner-container .logo {
	max-width: 340px;
}

.responsive #top #header .logo, .responsive #top #header .logo a, .responsive #top #header .logo img {
	width: auto;
	height: 156px;
}

We recommend opening separate posts for each inquiry or question so that moderators could reply faster. Including multiple requests or inquiries in a single thread tends to be a bit more difficult and confusing for other users who might be looking for the same solution. Thank you for understanding.

Best regards,
Ismael

Hi,

Thank you for the update.

Yes, the css code should be added in the Enfold > General Styling > Quick CSS field or in the child theme’s style.css file if it is activated. After adding the css code, please toggle or temporarily disable the Performance > File Compression settings, and remove the browser cache to see the effect of the changes immediately.

Best regards,
Ismael

Hi,

For the hover effect, we could use this css code.

#top #header .av-main-nav > li:hover > a .avia-menu-text, #top #header .av-main-nav > li > a .avia-menu-subtext {
	color: #efebe8;
}

And to correct the height of the sub menu, please add this one.

.html_header_sticky #top .main_menu ul:first-child > li .sub-menu a {
	height: 32px !important;
	line-height: 32px !important;
}

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael

Hi,

Sorry for the delay. We added this css code to adjust the width of the menu items when the screen width is less than 1366px.

@media only screen and (max-width: 1366px) {
    .av-main-nav > li {
	width: auto !important;
    }
}

Best regards,
Ismael

Hi,

We will ask Mike to check the thread again. He seemed to have provided a lot of css customization, which totally changed the layout of the header.

The maximum container width is still set to 1310px, so it is the same as previously. You could add this css code to align the email and phone info to the first menu item, and the buttons to the last menu item, but this will only work on large screens, and so it will require extra adjustments on smaller screens.

#header #custom_html-4 {
	margin-left: 50px;
	left: 190px;
}

#header #custom_html-3 {
	margin-right: 50px;
	right: 170px;
}

Best regards,
Ismael

Hi,
I believe this thread should be closed as it seems to be a duplicate of a currently active one.

Best regards,
Mike

Hi,
We will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike