[Resolved] Can we Copy Header from Site Library

[Sourabh]

Hi,

Can we copy header from any GP site library template, and can use it into our project ??

or it will work with only template set ??

[Leo]

Hi there,

You cannot import just the header but we can guide you to re-create it.

Which header are you referring to?

Let me know 🙂

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

[Sourabh]

Yes Leo,

I wish to make two header one for home page only with primary menu, and another with seconday menu so whenever anyone click on any menu or leaving home page, secondary header should be visible…

Check your site library, template name “charge & Split (Header)” I want some mix of both means logo shoud be in center in mobile version but in left side in desktop, search button in right and menu hamburger in left side in mobile version –

I am writing device wise details which i want –

Desktop – Logo + Menu + Search Button
Mobile – Hamburg + Logo + Search (Same with tablet version)

Now guide me, how to make these ..

Note : Charge template having trnasparent header, when we scroll it becoming white sticky header so also share CSS code to make such header…

Regds:

[David]

Hi there,

if we can take this one step at a time.

1. Secondary navigation on entire site but not home page.
Add your Secondary Navigation to the Site and set its Location to Below Header.
Then create a Layout Element: https://docs.generatepress.com/article/layout-element-overview/
In the element Disable the Secondary Navigation and set the Display Rules to Front Page

2. Set up the Mobile Header in Customizer > Layout > Header and add your mobile friendly logo,

3. Enable the Navigation Search in Customizer > Layout > Primary Navigation.

4. Set the Navigation as Header Option in Customizer > Layout > Header.

Once thats done provide a link to your site so we can provide the CSS for centring the mobile logo.

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

[Sourabh]

Nah, you starting from secondary however Tell me first how to create first one for the home page, then we can move into secondary –

Desktop – Logo + Menu + Search Button (This one)
Mobile – Hamburg + Logo + Search (Same with tablet version)

Then second header which you told above to do …correct me if i wrong

[David]

Just Skip step 1 for now. You can do that later.
Follow the steps 2-4 i provided and provide a link

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

[Sourabh]

HI,

Sorry for late reply, i went out of state for work, i have created secondary menu and did what you said above, but when open mobile view both primary and secondary menu visible as Hamburg ??

refer my website – http://www.venusentertainments.com

[David]

Can you check that URL – as i cannot get it to load?

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

[Sourabh]

Its working fine, recheck – http://venusentertainments.com/

[Sourabh]

I am not happy reply time with support team, since November 18, i am dealing with simple query, Just reply once and wait for long time to get reverted ??

[David]

I am sorry but we try to answer every support topic within 12 hrs. Our average initial response time is under 5hrs. We had no response for several days. When the URL was provided it was incorrect – as the www. subdomain does not link to your site.
Your request is not a simple query – you’re asking for a custom design that falls outside of general support but we endeavour to help all our users achieve their custom styles.

Back to the topic:

1. Add this CSS to re-arrange the Mobile Header.

.main-navigation.has-branding .menu-toggle, 
.main-navigation.has-sticky-branding.navigation-stick .menu-toggle {
    order: -5;
}

/* optional CSS if you want the logo centered in the nav */
.mobile-header-navigation.has-menu-bar-items .mobile-header-logo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translatex(-50%);
}

2. To create the Merged Header effect, you will need to create a Header Element.
This article explains how:

https://docs.generatepress.com/article/header-element-overview/

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

[Sourabh]

Thanks,

Dont get me wrong david, But you understand how boring it is to wait for such a long time after a reply, anyways Sorry for anything wrong, And thanks a lot for your help –

I also need CSS code for small shadow for header at the bottom, and when i scroll down then header should shrink a bit..

[David]

Do you want to make those other changes first, best we solve the original topic before adding more requests.

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

[Sourabh]

Hey David,

I am Sorry for asking, I am bit novice technically –

I think i am making some mistakes (I am pasting CSS into – content section of header element), Let me know if i am wrong, However when i do this, i start getting errors and all the css start visible in the home page itself, SO i think i am making some mistakes, pls make me correct ..

[David]

CSS should be added to the Customizer > Additional CSS.

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

[Author]

Posts