How to make content in header full width

Beaver Builder
1

First question… how do I make the content of my header full width? To better illustrate what I mean, go to this site: http://kottongrammer.com

You’ll see that the header “expands” as you drag out the page to make it wider, so that the logo is ALWAYS at the far left of the page, and the menu bar is ALWAYS at the far right of the page, no matter what the width of the page becomes.

Whereas if you head over to my site: http://vine.testdomainforsethwebsite.com you can see that that “expand” effect only goes out to about 960px or 1000px whatever it is, then it stops. I want the head to be like KottonGrammer.com

Also, is there any way for me to get the phone number call to action above the header to be 2 different text colors, as it appears on KottonGrammer.com? Thanks.

2

Hi Seth,

Welcome to the BB Forums!

If you add the following code to either your child themes style.css file or via the Customizer > Code > CSS Code. It should give you the styling you require.

.fl-page-nav-right .fl-page-header-container {
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
}

All the best,
Danny

3

Danny, thanks. Is there an answer to my second question or youre not sure?

4

Hi Seth,

Sorry, I missed that question.

To change the phone number color, follow the steps below.

  1. In the Customizer, navigate to Header > Top Bar Layout.
  2. In the text area option where you have added your contact information like so: Call Us Today 516-660-4811
  3. Replace with the following: Call Us Today <span class="my-red-text">516-660-4811</span>
  4. Once this has been replaced, go to Customizer > Code > CSS Code and add the following CSS:
.my-red-text {
  color: red;
}
  1. Save the changes and when you refresh the page, the phone number part of your contact info, should now be red.

You can play about with the code and add more styling such as font-weight and so forth.

If you want to have the “Call us Today” text a different color as well. Wrap that text in spans too and apply a custom class to that. For example:

<span class="my-white-text">Call Us Today</span> <span class="my-red-text">516-660-4811</span>

Then add the following CSS to the Customizer or your child themes style.css file:

.my-red-text {
  color: red;
}
.my-white-text {
  color: white;
}

All the best,
Danny

5

thank you so much!

6

this is BY FAR the best theme support i’ve ever gotten

7

No problem Seth and thank you for the kind words.

All the best,
Danny