[Resolved] Top Bar With Content

Home Forums Support [Resolved] Top Bar With Content

Home Forums Support Top Bar With Content

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #135419
    Mosche

    Dear All,

    I’m trying to get the same bar as mentioned in
    https://generatepress.com/forums/topic/full-width-bar/

    However I don’t want it to be a full width.
    It should be just as wide as the rest of the site.
    If I place the div before the header. And adjust the with in the CSS it looks perfect.
    But it’s no longer responsive.
    If I put it in the before header content. It’s responsive.
    The whole bar is slightly to the left and right.
    Not flush with the top and left margin of the header.
    How do i get it flush with the left and top margin of the header?

    this is the css i used:
    .full-width-bar {
    width: 100%;
    background-color: #1E72BD;
    color: #ffffff;
    padding: 15px;
    }

    #135440
    bdbrown

    Hi Mosche. If you add the code to the “Before Header Content” hook, the bar should line up with the header width. Try removing the “width” property from your style. If that doesn’t do it, can you post a link to your site so we can see what it’s doing? Thanks.

    #135468
    Tom
    Lead Developer
    Lead Developer

    The above should work.

    Alternatively, you can add the grid-container class to your element like this: <div class="full-width-bar grid-container grid-parent">

    #135518
    Mosche

    Dear All,

    I’m currently running the website on a local test environment.
    So unfortunately I can’t show the live version yet.
    I’ve removed the
    width 100%

    Then I realized that the spacing for the header was creating the gap, this time on both sides.
    I reduced the header spacing to 0
    And my bar sits neatly flush to the top and sides of my header.
    And is responsive.

    The only issue is that my Logo and header widget are also sitting flush with the sides of the header.
    Which doesn’t look so well. But I can find a way to get around it.

    As always. Many thanks for the support and quick response.

    #135573
    Tom
    Lead Developer
    Lead Developer

    So you had to remove the header spacing for this to work? Any chance you can post a screenshot of what it looked like with the header spacing?

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