[Resolved] Page header/menu

[Andrei]

I need to make the header, meniu navigation like here – https://www.gahumanresources.co.uk/about-gahumanresources/contact-us/

How I can add that blue button so that it can be separated from the rest of the menu, how I can add the logo so that it will be on the same line with the menu, at this moment the logo is higher than the menu…

Can I add that blue line under title page?

[David]

Hi Andrei, lets try this:

1. Set-up navigation, Customiser > Layout > Primary Navigation:
Set Navigation width and Inner Navigation Width to full. Navigation alignment left.
Add Navigation logo and set to Sticky & Static.
Now set the colors for the nav – this will be used on for the Sticky navigation

2. Adding a button to menu by giving that menu item a class:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

Then add your CSS e.g:

.main-navigation .my-custom-class a {
    border-radius: 30px;
    background-color: #08C;
    color: #fff;
    float: right;
    /* other CSS for your button */
}

3. Now head to Dashboard > Page Headers and create & name a new page header.
Image Tab > add a background image, or leave this empty to use the pages featured image.
Content tab > add this to the editor:

<h1>{{post_title}}</h1>
<span class="db-title-divider"></span>

Now select Add background image, Add padding, Container: Full width, Text Alignment Center, Top & Bottom Padding: 150px.

Advanced tab > select merge with site header. And then select Custom Navigation Colors where you can now set the nav background to transparent etc.

You can then assign this page header to all Pages through the Page Header > Global Locations or individually on each page in the editor under layout.

4. Then the CSS for your title divider:

.db-title-divider {
    width: 80px;
    border-bottom-width: 6px;
    margin: 10px 0;
}

[Andrei]

I followed your tutorial, but the result isn’t like that example.
Do you wish to take a look over the website?
How I can share the login credentials?

[David]

Hi Andrei, if the site is open you can share a link in the field provided here. And i can have a look at the front end.
If login is required then you can send them via:

https://generatepress.com/contact/

Please add the URL for this post

[Andrei]

I’ve sent an email.
Thanks

For sticky navigation how I can make the button smaller, because now, isn’t so nice.

Check here
https://cl.ly/rZxD/download/Screen%20Shot%202018-05-15%20at%2015.35.59.png

[David]

Hi Andrei, i will take a look when we get a minute. The simplest way to reduce the button height would be to adjust the Menu item height in Customiser > Layout > Sticky Navigation

[Andrei]

I did that, but the logo will be affected and it will not be clear enough.

So the best option at this moment is to have 65px height but the button background color to be around 20-30px…
I will wait, isn’t urgent.

[David]

Hi Andrei, if you want to style the sticky one differently then you can use the same code above and include the .navigation-stick selector. To change he height of the button, then you will need to use the line-height property.

[Andrei]

I can’t make it work.
Maybe you can take a look.

[David]

Hi Andrei,

can you try the following – comment out (or remove and put somewhere safe) these CSS rules:

li#menu-item-190 {
    float: right;
    margin-right: 30px;
	border-radius: 30px !important;
    color: #fff !important;
	background-color: rgb(0, 156, 234) !important;
}
li#menu-item-190:hover {
    border-radius: 30px;
    color: #fff;
	background-color: rgb(0, 156, 234);
}

.main-navigation .visible-cta .navigation-stick a {
line-height: 35px;
}

And try this instead:

.main-navigation .visible-cta {
    float: right;
    margin-right: 30px;
}
.main-navigation .visible-cta a {
    border-radius: 30px;
    color: #fff !important;
    background-color: rgb(0, 136, 204);
}
.main-navigation .visible-cta a:hover {
    background-color: rgb(0, 156, 234) !important;
}
.sticky-enabled .main-navigation.is_stuck .visible-cta  a {
    line-height: 35px;
    position: relative;
    transform: translatey(50%);
}

[Andrei]

It’s working.
Thanks a lot.

Also, I need to make this header from the main page – https://www.gahumanresources.co.uk/

Can you guide on the process?

Thanks

[Andrei]

Another problem that I am trying to figure out is why the logo is so small and how I can make it bigger and the menu, should have some padding-left because now is too close to the logo.

[David]

Hi Andrei,

the Navigation Logo height is defined by the navigation bar height. An alternative would be to set the navigation logo to Sticky only, add a Site logo in the site identity and set the navigation location to float right.

[Andrei]

But when I do that, the logo will be above the menu…

I did make some tweaks while I was waiting for your reply and now seems better.

Can you guide me through

I need to make this header from the main page – https://www.gahumanresources.co.uk/

[David]

Hi Andrei, its looking good, to match that header you need to:

1. Set the header and navigation to full width in the customiser.
2. Use the GP Page Headers as you have done on the Contact, page if you don’t add the background image it will use the pages featured image.
3. Set the Page header to full width. And then as per the Contact page change your navigation colors to transparent.

[Author]

Posts