[Support request] Top Bar into 3 columns, Inner Width to be contained

[Daniel]

Hi there,
I’m still struggling to split the top bar into 3 columns.
Is there a way to put a hook into the Top Bar?
This is what I have done so far:
Hook: wp:head
Code:

<div class="fluid-header-area">
<div class="grid-33 top-bar-align-left">
    <a href="tel:+497615577400"><span class="dashicons dashicons-phone"></span> 0761 5577 400</a>
</div>
<div class="grid-33 top-bar-align-center">
   <p>
		 KOSTENLOSE BERATUNG für den ONLINE SHOP
	</p>
</div>
<div class="grid-33 top-bar-align-right">
    <a href="tel:+497615577400"><span class="dashicons dashicons-location"></span> Freiburg</a>
<a href="tel:+497615577400"><span class="dashicons dashicons-location"></span> Bad Dürrheim</a>
</div>
	</div>

-How can I make the Top Bar Inner Width to be contained?

-Since adjustments through the Customizer for the Top Bar don’t work for this hook, how can I edit my three widgets?

I would like to have a topbar like this: https://www.zalando.de/herren-home/

Thank you very much!

Daniel

GeneratePress 2.2.2

GP Premium 1.7.8

[David]

Hi there,

so first things, change the hook to before_header the wp_head hook should only be used for adding scripts, meta etc.

The hook element will not be customizable via the Top Bar customizer.

To make the changes you need

1. Contain the custom top bar by adding the grid-container class to the first div ie.
<div class="fluid-header-area grid-container">

2. Change your grid widths for the three columns to grid-25 for the first and last column. And grid-50 for the middle column. This will give the middle one enough space to take up a single line.

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

[Author]

Posts