Top bar widget alignment

[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.

[David]

Hi there,

can you share a link where i can see this ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[George]

I have updated the original post.

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[George]

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

[Author]

Posts