Adding a blue horizontal bar within a div

Hello support Team!

I need some help adding a blue horizontal bar across the header on this page (http://192.185.87.172/~worldwaystravel/) so the row which has the phone numbers above the menu area is blue (#1D92E5).

I added the following code as Custom CSS but it applied the blue bar only on the sticky menu (which appears when you scroll down):

/*This is the header area apparently which I re-entered in the Custom CSS for ease of reference*/
.header {
    color: #004489;
    background: #fff;
}
/*The following code is what applied the blue bar on the sticky menu*/
.header:before{
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    width:100%;
    height:7%;
    content:"";
    background-color:#1D92E5;
}

The blue line should resize properly on mobile view as well so it will have to be shorter I guess.

Unfortunately, I can't find which div would apply the blue bar to the desired area only and of course I would change the phone numbers to White color although I do know there is no separate div dedicated to the phone number area as it seems (not sure).

Second part of the question - Is there was way to append the phone number row to the Sticky menu but with smaller font size and reduced height of the menu bar. We can get rid of the horizontal line in the sticky menu to make room for the logo. Your help in this will be appreciated!!

We plan on launching the website very soon so your speedy reply will be appreciated :slight_smile:

Thanks!

  • Adam Czajczyk

    Hello Monis,

    I hope you're well today and thank you for your question!

    The "phone bar" has it's own class of "header__info" and the phone number is wrapped in yet another class. This CSS should help:

    .header__info {background-color:#1D92E5;}
    .header__info__item--phone {color:#FFFFFF;}

    Second part of the question - Is there was way to append the phone number row to the Sticky menu but with smaller font size and reduced height of the menu bar. We can get rid of the horizontal line in the sticky menu to make room for the logo. Your help in this will be appreciated!!

    I think there should be the way but I'm not quite sure how would you like that to look like. Could you please provide me with some simple mockup/sketch of that? It would help me a lot.

    Best regards,
    Adam

  • Monis

    Hi Adam

    Thanks for your response!

    I've implemented the snippet of code you shared (how-it-looks.jpg). How can we make the blue bar stretch across the entire width of the screen in both desktop/tablet/mobile?

    Second part of question - I've attached a screenshot of how we want the sticky header to appear (sticky-nav-mod.jpg). As you can see logo is untouched, but the other parts have been modified.

    Thanks!

  • Adam Czajczyk

    Hello Monis,

    Thank you for your feedback!

    I updated the CSS code a bit so could you please give it a try instead of the one I suggested previously?

    .header .container {width:100%;margin:0;padding:0;}
    .header__info {background-color:#1D92E5;}
    .header__info__item--phone {color:#FFFFFF;padding-right:5%;}
    .header__content-wrap {max-width:1170px;margin:0 auto;}
    
    .header-wrap--sticky-header .main-nav-header ul {
    	margin-top:20px;
    	margin-bottom:-20px;
    }
    .header-wrap--sticky-header .main-nav-header ul:before {
    	content:'\f095 416-461-0920 | 1-884-WW-UMRAH';
    	color:#3CAD49;
      position:absolute;
    	top:-20px;
    	right:16px;
    }

    While tested using browser CSS editor this seems to do what's expected: the "blue bar" is full width and the sticky header gets modified as shown on your screenshot. It seems to be playing well with mobile devices. Test it please and let me know if it works for you.

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.