[Resolved] How can I achieve header like https://themify.me/demo/themes/ultra-accountant/

[Mohit]

Hi guys, I like header of https://themify.me/demo/themes/ultra-accountant/ website. Also check how it looks when you scroll down.

[David]

Hi there, you could try this:

Within customiser
1. Site Identity > Remove all identity and logo.
2. Layout > Header. Change all padding to zero.
3. Layout > Navigation. Set to Full width and inner to Contained. S et Location to Below Header. Add a navigation logo set to sticky and static.
4. Layout > Sticky Navigation. Select this and the transition effect you want.
5. Additional CSS add the following:

.inside-navigation {
	position: relative;
	top: 30px;
	background-color: #000;
}

change the #000 to match the Color set in the primary navigation.

The telephone number and social icons can be added to the Top Bar Widget area. We can help with positioning once they are there if you need.

The full hero image can be achieved using a GP Page Header set to full width with content and the necessary padding.

[Mohit]

Thanks man!! your support is really great!!

There’s a little problem; there’s less margin between logo and primary nav now. How could I add more margin between nav and logo? By the way I added dummy logo to test things out.

https://planeteimmigration.com

Also once I have more menu items in primary menu, how can i make sure additional menu items that go on to the next line float to right.

Thanks again!!

[David]

You can Align the Navigation Right in the Customiser > Layout > Navigation.
Create a Menu in Dashboard > Appearance > Menus (or in the Customsier > Menus) and assign this to the Primary Navigation. The order the items are placed will be Top menu item = Left item in navigation.

[Mohit]

Cool.. I think you missed out on a small thing in the header I like.. When you scroll down you would notice part above “inside-navigation” disappears in ultra demo.. Thanks

[David]

Try adding this CSS:

.sticky-enabled .main-navigation.is_stuck {
    margin-top: -30px !important;
}

[Mohit]

Thanks for answering all the questions.

If you don’t mind me asking one more regarding that demo website please answer:

In the primary nav of demo site you’d see “Book Appointment” menu item which has background and little border around it. When I try to add background it extends entire height of the “inside-navigation”. I want some margin on top and bottom not the entire height after I add background and border to a menu item.

[David]

Have you tried this method:

https://docs.generatepress.com/article/adding-buttons-navigation/

[Mohit]

Ok, I will try it.. I think as a side affect of all the customization, mobile menu items are visible.

[Mohit]

Dang my bad. Although GP by default adds pages to primary nav enough though you have created a menu BUT it doesn’t add that to slideout nav lo man this is confusing.. Sorry for the trouble!!

[David]

If you want to limit the customisation to Desktop then we can wrap the CSS rules in a media query like so:

@media (min-width: 768px) {
    .inside-navigation {
    	position: relative;
    	top: 30px;
    	background-color: #000;
    }
    .sticky-enabled .main-navigation.is_stuck {
        margin-top: -30px !important;
    }
}

[Mohit]

I want header customization for both desktop and tablet. I understand it’d require different min-width.

Need another css tweak from you. If you’d notice demo’s mobile menu slideout animation, mobile menu slideout part has darker color and overlay over other non mobile menu nav area.

If I may sir, how can I do this?

Thanks,

Saurabh

[David]

Customiser > Colors > Slide Out Navigation allows you to set the navigation colors. To change the Overlay color requires this CSS:

.slideout-overlay {
    background-color: rgba(255,255,255,0.5);
}

[Mohit]

Thanks slide overlay worked. Regarding demo’s call to action “book appointment” button in navbar, I tried to do the same thing using the docs link you provided but background of “privacy policy” button in my case is still full height on navbar.

https://planeteimmigration.com

[David]

Hi, add this into your CSS rule for the nav button:

line-height: 2.5em;

Adjust the 2.5em accordingly.

[Author]

Posts