Adding additional header on the top of the webpage

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.

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;
}

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

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

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.

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?

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

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 :)

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

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.

Awesome! :)