[Resolved] Adding Rows Above Menu

[Brenda]

Hi Tom,

I would like to add two rows above my menu. One will contain content such as phone number, email, and social links. The other row will contain a centered logo and company name. I would appreciate any assistance.

Thank you,
Brenda

[Tom]

Hi there,

The logo and company name can be done using the default header. Just upload your logo in “Customize > Site Identity” and center it in “Customize > Layout > Header”.

For the top bar, you could do something like this in the Before Header hook inGP Hooks:

<div class="top-bar">
    <div class="inside-top-bar grid-container">
        <div class="grid-50 tablet-grid-50 mobile-grid-100 top-bar-left">
            <a href="mailto:me@myemail.com">Email me!</a> | 1-234-56789
        </div>
        <div class="grid-50 tablet-grid-50 mobile-grid-100 top-bar-right">
            <a href="http://facebook.com/me"><i class="fa fa-facebook"></i></a>
            <a href="http://twitter.com/me"><i class="fa fa-twitter"></i></a>
        </div>
    </div>
</div>

Then style it with some CSS:

.top-bar {
    background: red;
    color: white;
}

.top-bar-right {
    text-align: right;
}

Hope this helps 🙂

[Brenda]

Thank you Tom!!!!!!!
This was a teaching moment for me!

[Tom]

You’re welcome! 🙂

[Brenda]

Hi Tom,

If the default header places the logo/company name above (below, right,left) the menu, how would I place the log to the left or right of the menu in the same row?

Brenda

[Tom]

If I understand correctly, you would make the Navigation position either “Float Left” or “Float Right” in “Customize > Layout > Primary Navigation”.

[Brenda]

Yes, and the logo/company name would float left or right of the navigation.

[Tom]

The options I mentioned should do exactly that 🙂

[Brenda]

Thank you.

[Tom]

You’re welcome 🙂

[Author]

Posts