[Resolved] Top bar widget alignment

Home Forums Support Top bar widget alignment

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1211426
    George

    Hello. I have the following top bar layout settings:

    Top Bar Width: Full, Top Bar Inner Width: Full, Top Bar Alignment: Center

    I have added 3 text widgets on the top bar (button – text – button). This is also the order they have been placed in the Widgets admin area. They are center-aligned but do not occupy the full width as stated by the previous settings. I tried adding flexbox to the container like this:

    .inside-top-bar {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
    }

    but the children widgets shift on the left as a group still not occupying the full width! Why is it doing that?

    Here is the HTML from the Inspector:

    <div class="top-bar top-bar-align-center" style="">
    	<div class="inside-top-bar">
    		<aside id="text-10" class="widget inner-padding widget_text" style="">
    			<div class="textwidget"><p><a class="button btn-top-bar" style="font-weight: 500;" href="/custom-quote/">Get Custom Quote</a></p>
    			</div>
    		</aside>
    		<aside id="text-9" class="widget inner-padding widget_text" style="">
    			<div class="textwidget"><p>Call today for FAST price quotes: <strong><a style="font-size: larger;" href="tel:800-111-1111">800-111-1111</a></strong></p>
    			</div>
    		</aside><aside id="text-11" class="widget inner-padding widget_text" style="">
    			<div class="textwidget"><p><a class="button btn-top-bar" style="font-weight: 500;" href="/contact-us/">Email Us</a></p>
    			</div>
    		</aside>			
    	</div>
    </div>

    What I am after: I want the left button floated all the way to the left of the screen as stated by the full width top bar container. The right button floated all the way to the right in a similar manner. And the button to be center aligned.

    #1211708
    David
    Staff
    Customer Support

    Hi there,

    can you share a link where i can see this ?

    #1211872
    George

    I have updated the original post.

    #1212065
    David
    Staff
    Customer Support

    Ok so the the top bar uses the GP grid-container which includes :after elements for clear fixes. Flex treats pseudos like an actual HTML element – so you actually have 4 elements filling the space.

    You can remove it like so:

    .inside-top-bar:not(.grid-container):after {
        display: none;
    }
    #1212140
    George

    Ah, I see! Perfect, it’s good now, thank you David.

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