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

Home Forums Support [Resolved] Adding additional header on the top of the webpage

Home Forums Support Adding additional header on the top of the webpage

  • This topic has 10 replies, 3 voices, and was last updated 9 years ago by Tom.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #83943
    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.

    #83951
    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.

    #84029
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #84199
    Siong Boon Lim

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

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

    #84204
    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.

    #84354
    Tom
    Lead Developer
    Lead Developer

    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?

    #84449
    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

    #84565
    Tom
    Lead Developer
    Lead Developer

    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 ๐Ÿ™‚

    #86252
    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

    #86260
    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.

    #86352
    Tom
    Lead Developer
    Lead Developer

    Awesome! ๐Ÿ™‚

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.