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

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

Home Forums Support Top Bar into 3 columns, Inner Width to be contained

  • This topic has 1 reply, 2 voices, and was last updated 5 years ago by David.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #844148
    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

    #844353
    David
    Staff
    Customer Support

    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.

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