Archived topic
Menu styling
2 replies · Started by Pedro on February 11, 2019
Hello!! I'm setting up my site with GP. And I would like the elements (primary, secondary and header menu) to look like the ones in the following pictures:
How could I do it? Thank you!
Hello, can you help me?
Hi there,
The following steps should help you to get started:
- Hide site title/tagline etc and remove the site logo:
https://docs.generatepress.com/article/site-identity-overview/
- Add the site logo as the first header widget using Custom HTML like this:
<div class="site-logo">
<a href="http://HOME-PAGE-URL" title="" rel="HOME-PAGE-TITLE">
<img class="header-image" alt="" src="http://LOGO-IMAGE-URL" title="">
</a>
</div>
- Add the search widget as the second header widget.
- Add the Cart widget from WooCommerce as the third header widget.
- Add the following CSS:
.header-widget {
float: none;
max-width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.header-widget .widget_search {
margin: auto;
}