[Support request] Custom Header

[Stefano]

Hi, I am trying to split the header into 3 columns (logo, menu-1 and menu-2) using menu widgets but I have a css problem.

How can I horizontally align menu-1 and menu-2?

Thanks
Stefano

[David]

Hi there,

before we get into that – you do realise that those Widgets are not responsive ? So there won’t be hamburger menu on mobile.

Is that what you want ?

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

[Stefano]

Yes certainly.
From mobile I don’t make them visible. I need to use these widgets only from desktop.

[David]

Try this CSS:

.header-widget ul.menu {
    display: flex;
    column-gap: 20px
}
.header-widget .widget_nav_menu:first-child {
    margin: auto;
}

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

[Stefano]

Thanks as always for the support 🙂

[David]

Glad to be of help

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

[Author]

Posts