Docs

[thisisbbc]

Hey guys,

We’re trying to create a similar header to this site : http://www.mynameisgriz.com/

The goal is to have the logo in the center, slightly overflowing on the first section of the website.

So far our tests with CSS only were not really successful. Will we have to modify the header file? If yes could you put us on the right path to achieve this?

Here’s our homepage : http://apashe.baamholdings.com/

Thank you!

Best regards,
Bastien

[Friech]

Hi Bastien,

Thanks for writing in! You can centered your logo in Customizer under the Header panel, set the logo and navigation Layout to Stacked.

Hope it helps, Cheers!

[thisisbbc]

Hey Friech,

Thanks for the quick reply. Would it be possible to have the logo centered using the Stacked option, but without the two menus being stacked? We would like the menu to be on the left/right on the same line as the menu, just like the Griz website demo.

Waiting for your feedback!

Best regards,
Bastien

[Joao]

Hi There,

Based on Griz Stack I would reccomend you a different approach.

For desktop and laptop version you would have your 2 menus on the topbar. and your navbar hidden.

Than for tablet and mobile you will hide your topbar and have the navbar showing.

So on your Appereance > Header > topbar content you will use something similar to this:

<div style="float:left" id="left"> <a href="/page1">Page 1</a>  
<a href="/page2">Page 2</a> <a href="/page3">Page 3</a> <a href="/page3">Page 3</a> </div><div style="float:right" id="right">  <a href="/page1">Page 1</a>  
<a href="/page2">Page 2</a> <a href="/page3">Page 3</a> <a href="/page3">Page 3</a></div>

You will need to set the same pages as links on your navbar because we will use those links on mobile and tablet as I said before.

On your Appereance Customizer Custom CSS you will add:

.x-topbar #left a, .x-topbar #right a {
  padding-left: 30px;
}

@media screen and (min-width: 969px) {
.x-navbar, .x-navbar-wrap {
display: none;
} }

@media screen and (max-width: 969px) {
.x-topbar {
display: none;
} }

Let us know how it goes,

Joao

[Author]

Posts