I want to add a second header into my site

Hi
I want to add a header like the one on here (https://bit.ly/2MSROCP) with the phone number and mobile icon on the top right hand corner.

I tried to enter it in to the widget I created for the header using the instructions here (https://bit.ly/2kks9WK) but didn’t have much luck.

Kris has done something similar for me on this site using the same theme too (https://bit.ly/2lUssYL) with the ‘Free Trial Memberships!’ header section, but I can’t find that ticket to see how to do it.
Any help to get that done would be fantastic :slight_smile:

Thanks
Farzan

  • Nebu John
    • Staff

    Hi Farzan Ahmed ,

    Hope you are doing good and thank you for reaching out to us.

    You can add a top header with phone number/extra info at Enfold > Header > Extra Elements, please check this screenshot:

    Alternatively, you can add custom code using widget area to create a menu similar to one in the page you shared. Please follow the below-given steps to get this done.

    1) Activate Header Widget area

    From the header layout settings at Enfold >> Header, I can understand that Menu Logo Position is set as Logo Left, Menu Right. Hence to activate the header widget area, add the following code to the functions.php file of your theme.

    //--------------------------------
    
    // Header widget area
    
    //--------------------------------
    
    add_action( 'ava_after_main_menu', 'enfold_customization_header_widget_area' );
    function enfold_customization_header_widget_area() {
    dynamic_sidebar( 'header' );
    }

    2) Create a widget area and add your custom code

    a) Navigate to Dashboard > Appearance > Widgets
    b) Create a new widget area named header
    c) Add a Custom HTML from Available Widget to the header widget area.

    Hope this helps you!

    Kind Regards,
    Nebu John

  • Farzan Ahmed
    • The Crimson Coder

    Thanks Nebu

    I created the widget area as I say in the post, but what I’m struggling with is the formatting.

    I’ve re-added the text (phone number) and the two lines are overlapping each other with the phone image misaligned as well.

    I think I just need to sort that out, and maybe make that header container wider so its not as crammed, and that will be good.

    Thanks
    Farzan

  • Farzan Ahmed
    • The Crimson Coder

    Thanks Nebu

    That’s good – can I get that text and phone number to be orange like in the original site as well though please, and push that widget area to the edge of the page so the header is more spread out across the page.

    Also, on the mobile view, can we tidy it up a little so the text/number are aligned with the phone image (the text is a bit lower than the image), and have it all in the centre of the screen for mobile devices maybe?

    Thanks
    Farzan

  • Nebu John
    • Staff

    Hi Farzan Ahmed ,

    Hope you are doing good today.

    I have added the following CSS to push the widget area to the right:

    @media screen and (min-width: 788px) {
    #custom_html-6 {
    position: absolute;
        left: 80%;
    }
    }

    And the following to fix issues in mobile view:

    @media screen and (max-width: 768px) {
    
        a.call-now div {
    	margin-top: 0px !important;
    	}
    
    div#custom_html-6 {
        width: 100%;
        margin-right: 25%;
    }
    
    	.call-now {
    float: unset !important;
    }
    }
    
    @media screen and (max-width: 758px) {
    div#custom_html-6 {
       margin-left: 40%;
    }
    }

    Please get back to us if you need any further assistance on this. :slight_smile:

    Kind Regards,
    Nebu John

  • Farzan Ahmed
    • The Crimson Coder

    Thanks Nebu

    That’s looking good – just some small tweaks though.

    Can you make the header background transparent and make the number/image central on the mobile device, but also span across the width of the header if possible?

    Can you also help with dropping the hamburger menu down a little on the mobile view please.

    Thanks
    Farzan

  • Nebu John
    • Staff

    Hi Farzan Ahmed,

    I replaced the CSS changes made for mobile view with the following:

    @media screen and (max-width: 758px) {
    div#custom_html-6 {
       margin-left: 40%;
    		position:absolute;
    	margin-top: -100px;
    }
    
    span.av-hamburger.av-hamburger--spin.av-js-hamburger {
        margin-top: 25px;
    }
    }

    Hope that helps.

    Kind Regards,
    Nebu John

  • Farzan Ahmed
    • The Crimson Coder

    Hi Nebu

    That’s putting the hamburger menu over the text on the mobile view – and the text over the logo.

    Can we leave the menu where it is now, and move the text down so its under the logo and menu, but spreading full width across the screen, or even centre aligned like it is on the original site?

    Again, only on mobile view please.

    Thanks
    Farzan

  • Nebu John
    • Staff

    Hi Farzan Ahmed ,

    Hope you are doing good today.

    I have added the following CSS so that the Call Now button will not be overlapping the hamburger menu in smaller screens.

    @media screen and (max-width: 500px) {
    
    .responsive .logo img {
    	max-height: 50px
    	}
    div#custom_html-6 {
    	margin-left: 15%;
    	}
    a.call-now div{
    	font-size: 14px;
             line-height: 15px;
    	margin-top: 15px !important;
    	}
    img.phone-img {
    	width: 35px;
    	}
    }

    Hope this helps.

    Kind Regards,
    Nebu John

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.