[Resolved] Adding additional header on the top of the webpage

[Siong Boon Lim]

Hi Tom,

Is there a way to add an additional header on the very top of the page?
Like this website, http://premierbus.com.sg
where they put the small wording for telephone number and email on the very top right of the menu.

How do I achieve that additional top header bar?

Thank you.

[Dee Broughton]

Hi,

I’m not sure how that site is doing it, but on a number of my sites, I’ve done something similar, either at the top, like here vidyablog.com, or at the bottom. They are created with plugins. I’ve used WP Front Notification Bar which is the one on that site, but lately I’ve preferred GC Message Bar. Both are good and both could be stationary or can be animated, etc. You can create styles with CSS so they look however you want.

[Tom]

I would personally use GP Hooks.

Something like this in the “Above Header” hook:

<div class="above-header-bar">
      <div class="grid-container grid-parent">
            Top bar content in here
      </div>
</div>

Then some CSS:

.above-header-bar {
      padding: 10px;
      background: #7CC68D;
      color: #FFF;
      text-align: right;
}

[Siong Boon Lim]

Thank you Tom.
This is what I am looking for.

Just to be precise, I use the GP hook “Before Header”

[Siong Boon Lim]

Hi Tom,

I still fail to align the text with css.
Seems that the object selector is incorrect
I try “grid-container” but my header text moved.

How do I select the of the “grid-container” of the “.above-header-bar”?

Thanks.

[Tom]

I’m not sure what you mean? grid-container will make it so the width of the your content in that bar matches the width of your website container.

What about it isn’t working?

[Siong Boon Lim]

I tried the following, cannot work.

.above-header-bar {
padding: 10px;
background: #7CC68D;
color: #FFF;
text-align: right;
}

I tried the following, can work but it also shifted other element,

.above-header-bar grid-container {
padding: 10px;
background: #7CC68D;
color: #FFF;
text-align: right;
}

Maybe I did something wrong somewhere.

I will setup the wordpress website one day so that you can take a look.
Currently it is running a static HTML site at http://www.pic-control.com

[Tom]

It would be great if I could see the site to know what was going on.

Let me know when you have it set up 🙂

[Siong Boon Lim]

Hi Tom,

Thank you. I have enable the website for these 3 days.
Looking forward to your help.
http://www.pic-control.com

I am able to change font size, color.
but it cannot align right.

Thank you very much.
Siong Boon

[Siong Boon Lim]

Hi Tom,

I found the issue using the style inspector from firefox web-browser

There was this code in my css which over-writes the .above-header-bar

.grid-container
{
text-align:left;
}

Forgotten why I put in the .grid-container for….

After I remove it, your codes works perfectly.
Thank you.

[Tom]

Awesome! 🙂

[Author]

Posts