Increase Top Bar Height and Font Size

Hi,

Sorry for the delay.

1-2.) Use this css code to adjust the height of the top bar.

#header_meta {
    min-height: 60px;
}

You may need to adjust the line height of the elements inside that container as well.

#header_meta .phone-info {
    line-height: 60px;
    font-size: 18px;
}

That code also increases the font size of the phone number.

3.) It’s possible to add a widget inside the header.

// https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area

If you want to put the widget in the top bar, replace the “ava_after_main_menu” with “avia_meta_header” hook.

4-5.) The following article should help:

// https://css-tricks.com/the-current-state-of-telephone-links/

We don’t usually entertain multiple questions in a single thread because it makes it quite confusing for other users who may be looking for the same answer. Please open a single thread for each of your inquiry next time. Thank you for understanding.

Best regards,
Ismael

Hi,

Thank you for the update.

1-2) The css code works properly on our end. Did you toggle the Performance > File Compression settings after adding the css code? And don’t forget to remove the browser cache.

3. Did you try to add the widget? Make sure that the secondary menu is activated. If you don’t have a secondary menu, include this filter in the functions.php file.

add_filter( 'avf_execute_avia_meta_header', '__return_true', 10, 1);

4-5.) Use this html code as suggested in the article.

<a href="tel:1-562-867-5309">1-562-867-5309</a>

Best regards,
Ismael

Hi,
I took another look at your site and found the css to be working, to demonstrate I changed the top gray bar and phone number to 60px

#header_meta {
    min-height: 60px !important; 
}
#header_meta .phone-info {
    line-height: 60px !important; 
    font-size: 60px !important; 
}

Please see the screenshot in Private Content area.
Please adjust to suit, and Then clear your browser cache and any cache plugin, and check.
I also adjusted your phone number in Enfold Theme Options > Header > Extra Elements > Phone Number or small info text so it is a link, please check.
You can also add more text there if you wish.

Best regards,
Mike

Hi,
I added some left side text for you, I changed the content in the Enfold Theme Options > Header > Extra Elements > Phone Number or small info text to this:

<span class="info-left">Left Side Info</span> <span class="info-right"><a href="tel:555-555-5555">(555) 555-5555</a></span>

Then I added this css in your Quick CSS:

#header_meta > div > .phone-info,#header_meta > div > .phone-info > span {
width: 100% !important;
float: none !important;
}
.phone-info span.info-right {
float:right !important;
}
.phone-info span.info-left {
float:left !important;
}

Please clear your browser cache and check.
Please see the screenshot in Private Content area.

Best regards,
Mike

Hi,
Glad to help, I assume we can close this now, but I like to ask first. Shall we close this then?

Best regards,
Mike

Hi,
Glad we were able to help, 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