- This topic has 4 replies, 2 voices, and was last updated 1 year ago by
George.
-
AuthorPosts
-
March 26, 2020 at 9:04 pm #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.
March 27, 2020 at 4:33 am #1211708David
StaffCustomer SupportHi 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/March 27, 2020 at 7:29 am #1211872George
I have updated the original post.
March 27, 2020 at 8:00 am #1212065David
StaffCustomer SupportOk 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/March 27, 2020 at 8:55 am #1212140George
Ah, I see! Perfect, it’s good now, thank you David.
-
AuthorPosts
- You must be logged in to reply to this topic.