Topbar and Header background issues

  • Hi there,

    I’m trying to add a topbar menu to my site…just offering users the option to sign-in or register.
    When I add the topbar menu it distorts the header area, as shown below…(I’ve used a weird variety of colours just to make it clearer what is happening)…
    https://postimg.org/image/qe5deeer9/

    The topbar background (grey) bleeds far into the header area…meaning the logo image is placed in front of both the header background colour (white) and the topbar background colour (grey). I just want the topbar strip to appear grey and the rest to appear white so the logo can stand-out.

    A black rectangular block also appears seemingly between the topbar area and the header area. What is this?! And how do I remove it?

    One final query would be – how do I align the topbar menu to the right? (Although this would be a bonus – I’d settle for just resolving the earlier queries!)

    Hope you can help.

    Thanks,
    Mark

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi Mark. Would be really helpful if you could post a link to your site so we can see what’s actually happening. Thanks.

    And here’s your bonus:

    /* right align topbar menu */
#nav-topbar .nav {
  text-align: right;
  padding-right: 100px;
}
    Thread Starter hubber47

    (@hubber47)

    Hi bdbrown, thanks for this.
    I’ve tried the code to align the topbar menu and it doesn’t seem to make any difference. Similarly, I’ve tried to use the header ad widget area to include links (and do away with the topbar altogether), but the widgets I add simply don’t show up on screen.
    I really just want an area with links (or text) to balance out the logo to the left. And the logo itself should be against a white header background.
    https://policyhubscotland.co.uk/

    The topbar menu in site you linked appears to be right-aligned (?). The logo that is visible is being generated by this code block which appears to have been added to header.php:

    <div class="group pad" style="background-color:#000;height:10px;">
<h1 class="site-title"><a href="https://policyhubscotland.co.uk/" rel="home"><img src="https://policyhubscotland.co.uk/wp-content/uploads/2015/04/PHS-website.jpg" alt="Policy Hub Scotland"></a></h1>
</div>

    This is overriding the default site-title logo and the header styling. Removing that block of code from header.php should fix your header. And, if you want to reduce the upper and lower whitespace and left-align the logo, you could add this css:

    #header .group.pad {
  padding: 0;
}

    Hope that helps.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Topbar and Header background issues’ is closed to new replies.