Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #1103405

    Hi Enfold Team,

    I have searched to find the answers, but no luck… so I’m starting a new thread. I want to do the following:

    1) Increase the height of the top gray bar (above the main menu).

    2) Increase the font size for the phone number.

    3) Add additional text on the left, and be able to adjust the size as in #2.

    4) Make the phone number clickable (i.e. add tel:+17045045354 so they can click and call the number).

    5) And “IF” I want to add additional words there (i.e. like a “Specials” link), how do I do that?

    Thanks in advance for all you do!

    #1104217

    Hey allyson3,
    Sorry for the late reply,
    I took a look at your site to assist with your requests above, but your site has a large error message on it: “The site is experiencing technical difficulties.”
    I see that you are using Enfold v3.8.4 with WordPress v5.2.1
    Please update to Enfold v4.5.7 manually via FTP
    Please note that if you update via FTP, you will need to remove the old theme folder “enfold” first (via FTP) then upload the new “enfold” folder at /wp-content/themes/enfold/
    Please don’t try to overwrite the theme folder, as this will leave old files behind and cause errors.

    Best regards,
    Mike

    #1104230

    Hi Mike, thanks!

    I have another thread open and have been waiting for a response before I do anything. I’m concerned about updating the theme since I can’t get the Child Theme to work. Link to other thread below.

    #1104302

    Hi,
    I activated your “Enfold Child Legacy” and cleared your site cache and my browser cache and the css seems to match, I then switched back. Please try to do the same and check.

    Best regards,
    Mike

    #1104318

    Thanks! It works. Theme is updated, so back to my questions…

    I have searched to find the answers, but no luck… so I’m starting a new thread. I want to do the following:

    1) Increase the height of the top gray bar (above the main menu).

    2) Increase the font size for the phone number.

    3) Add additional text on the left, and be able to adjust the size as in #2.

    4) Make the phone number clickable (i.e. add tel:+17045045354 so they can click and call the number).

    5) And “IF” I want to add additional words there (i.e. like a “Specials” link), how do I do that?

    Thanks in advance for all you do!

    #1104941

    Hey guys,

    I really need to get these issues resolved so I can go live with this website.

    Thanks!

    #1105356

    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

    #1105492

    Hi Ismael,

    I can’t get any of those to work. Any other suggestions?

    #1105600

    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

    #1105725

    Ismael,

    I don’t understand what you mean about the File Compression setting.

    Nor do I understand why I need to add a secondary menu if I just want to add text to the left side.

    Help!

    #1106069

    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

    #1106166

    Oh wow Mike,

    Thank you so very much!

    Now I just need to figure out how to add text to the left side ;)

    #1106176

    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

    #1106184

    Thank you so very much Mike!

    #1106190

    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

    #1106397

    Yes, you may. Thanks again!

    #1106440

    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

Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Increase Top Bar Height and Font Size’ is closed to new replies.