[Resolved] GP getting started questions – Awaken theme

Home Forums Support [Resolved] GP getting started questions – Awaken theme

Home Forums Support GP getting started questions – Awaken theme

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #932016
    Morgan

    EDIT: made many changes below, apols if you read before them!

    Howdy, just getting feet wet with GP, have some questions while getting oriented in GP, working with Awaken theme – apols in advance if I failed any intelligence tests!

    1. The ‘Global Header’ is ‘merged’, I understand the display rule – show on Homepage, but A) why is this Merge needed? (docs say “Merge . . . places your site header on top of the content below it”, isn’t that what *any* content would do?) B) what’s the purpose of having 1 Header *only* embedded above what is already an Elementor Page (instead of header on-page)?
    2. I’m assuming the Doc https://docs.generatepress.com/article/transparent-header-and-navigation/ isn’t relevant if I just want my Site Logo to fade/slide sideways over a trans bg, before changing to the current small/sticky-nav logo as-is when scrolling down? (an example of Elementor logo-fade-slide on-scroll here: http://storyclusters.com/logofademove/ )
    3. I wanted a trans-white shadow on sticky, not trans-black, but this code I found on forum isn’t working (have it in active code-snippet https://wordpress.org/plugins/code-snippets/ ):
      /* sticky shadow */
      #masthead {
      	-webkit-box-shadow: 0 2px 4px -1px rgba(255,255,255,0.25);
      	-moz-box-shadow: 0 2px 4px -1px rgba(255,255,255,0.25);
      	box-shadow: 0 2px 4px -1px rgba(255,255,255,0.25);
      }
    4. The search field (currently hidden) overlay is on top of the menu text, with no bg colour.
    #932411
    Leo
    Staff
    Customer Support

    Hi there,

    1. A) Merge is definitely not needed. You can see the differences in these two examples:
    Not merge: https://docs.generatepress.com/article/page-hero-examples/#example-1
    Merge: https://docs.generatepress.com/article/page-hero-examples/#example-2

    1. B) That’s just how the author designed it. You can change it however you like.

    2. Nope that effect has nothing to do with merge.

    3. That code is CSS so use one of these method:
    https://docs.generatepress.com/article/adding-css/

    Let me know πŸ™‚

    #932580
    Morgan

    Heya,

    Thanks for reply.

    1. A. Ok, so merge is only relevant when header is NOT nav?
    Note that I DO want to have a transparent nav-menu only on HOME that then fades-in white bg on scroll-down. Can I do this with current nav as header?

    2. Ok. Might you be able to give me any tips &/or CSS to get logo fade-left on scroll, like: http://storyclusters.com/logofademove/ (copy and paste elementor into site-logo?) ?

    3. Yes, it’s inserted *as CSS* in Code Snippets. I know it’s working – it’s inline with other CSS that’s already working.

    I forgot to add:

    MENU:
    4. The search field appears over the logo, and there’s no bg/border to show the field – it’s invisible.

    5. DESKTOP: How to move the search icon left of hamburger?

    5. A. MOBILE: how can I have the menu hamburger show only the primary nav menu when on mobile (standard menu = hamburger, hide secondary-nav-hamburger)?
    B. Customising/Layout/Header mobile breakpoint seems to have no effect.

    6. The logo width is constrained, I’ve checked, and added CSS from forum, but it wont go wider than about 56px.

    #932593
    Leo
    Staff
    Customer Support

    1A I’m not quite sure what you are asking here. You can use the merge option with or without the header.

    1B It’s just the design the author wanted I guess? You can modify the template however you want.

    2. To create something like that, this should help:
    https://docs.generatepress.com/article/navigation-as-a-header/#sticky-navigation-with-height-transition

    Then just need to upload a separate sticky navigation logo:
    https://docs.generatepress.com/article/sticky-navigation/#sticky-navigation-logo

    3-6 Which site should I be looking at? I don’t see a header/navigation on the link you provided in the private URL field.

    #932621
    Morgan

    I have a bad habit of posting then editing out the cruft, and then poking the site, sry!
    Site has nav on again.

    Ignore previous, see edit below for clarity:

    1. A. The MERGE example you gave feats a transparent menu. I simply want to have a transparent-static-nav-menu that fades-in-white-bg on-scroll. The only Doc examples of this seem to need MERGE, yet technically it’s just static-transparent-nav, then white-bg sticky, hence: confused. (‘Merge’ seems like it should be called ‘transparent header’, no?).

    2. I started with that Doc, already done and working w’ separate logo. I’m asking if my logo on-scroll can fade+move before changing to sticky-logo (as is, it just shrinks), as per: http://storyclusters.com/logofademove/ – probably best to look πŸ˜‰ .

    3. Yes, it is inserted *as CSS* in Code Snippets – other CSS is working, this isn’t:

    /* sticky shadow */
    #masthead {
    	-webkit-box-shadow: 0 2px 4px -1px rgba(255,255,255,0.25);
    	-moz-box-shadow: 0 2px 4px -1px rgba(255,255,255,0.25);
    	box-shadow: 0 2px 4px -1px rgba(255,255,255,0.25);
    }

    MENU:
    4. The search field appears over the logo, no bg/border styling to show the field – making it invisible.

    5. DESKTOP: How do I move the search icon left of hamburger?

    6. The logo width is constrained, I’ve checked browser CSS, added CSS from forum, but it wont go wider than about 56px, and stretches vertically.

    7. MOBILE:
    A. Have hamburger show only primary-nav-menu, i.e. primary menu becomes hamburger, hide desktop secondary-nav-hamburger (this is standard practice)
    B. Customising/Layout/Header mobile breakpoint seems to have no effect.

    #932628
    Morgan

    P.s. I’m migrating an unlaunched site to GP, you can see menu elements – search + transparent fade-in at: http://reel.marketing

    #932638
    Leo
    Staff
    Customer Support

    1. I’m still confused what you are after. You can definitely set the navigation to be transparent, but without merging, it would simply show the body background color.

    The merge option is needed for something like this: http://reel.marketing/

    2. Ohh are you referring to the logo in the middle of the page?
    https://www.screencast.com/t/gE1OQcXAbg7

    That will require some custom coding unfortunately. Elementor is a good option for something like that.

    3. The CSS isn’t working because you aren’t using the default header. Try this:

    #site-navigation {
        box-shadow: 0 5px 8px -1px rgba(0,0,0,.4);
        position: relative;
    }

    Can you please open a separate topic for the questions 4-7?

    This topic is getting quite messy.

    Thank you.

    #932655
    Morgan

    I’ll create new post for 4-7.

    1. I think we’re confused because it’s confusing, *which is my point*.
    U said: “U don’t have to use merge for transparent menu, yet for reel.marketing u need to use merge”, que? Reel.marketing IS just a transparent nav menu.

    2. “Ohh are you referring to the logo in the middle of the page? https://www.screencast.com/t/gE1OQcXAbg7”

    Oh my gosh, haha, YES!
    I’m asking for any tips on how I could get it into the menu, esp considering I have a working example from Elementor.

    3.

    #site-navigation {
        box-shadow: 0 5px 8px -1px rgba(0,0,0,.4);
        position: relative;
    }

    This is for the Nav Menu I’ve said more than a few times I want to be transparent. I want working CSS for shadow on Sticky-Nav.

    #932657
    Leo
    Staff
    Customer Support

    1. It’s confusing because I didn’t know what you are trying to achieve until you mentioned it here:
    https://generatepress.com/forums/topic/awaken-theme-glitches/#post-932628

    Simply put, to create this: http://reel.marketing/

    You need to use the merge option. It is exactly what its for.

    2. I’m not sure how Elementor did it unfortunately. It will require some custom coding as I mentioned.

    3. Try this selector instead:
    .sticky-enabled .main-navigation.is_stuck

    Let me know πŸ™‚

    #932715
    Morgan

    1. Ok got it, ‘Merge’ is a transparent &/or offset-overlay. Phew.
    A point of confusion is I can’t find customizer setting for sticky-nav-BG-color, if there was it would be so much simpler to achieve what I wanted (negative top-padding on container on home, done). I know I can do this with CSS, but I’m trying to learn the ins and outs of GP.

    2. We’ve already got a working version of Logo with fade+move, I’ve shared a few times – the one you pointed at with an arrow πŸ˜› .
    I could create a template/element or something to get this existing Elementor element into the header-nav. I’ve been thinking you’re someone that could save me time in doing something like this by giving me advice, no?

    3. YES. Ok, progress!

    #932722
    Leo
    Staff
    Customer Support

    1. You can set specific navigation colors for that specific header element:
    https://docs.generatepress.com/article/header-element-overview/#navigation-colors

    Then the sticky navigation color will inherit the colors set in Color > Primary navigation.

    End result should be:
    https://docs.generatepress.com/article/navigation-as-a-header/#different-logo-and-navigation-colors

    2. The fade in/move to the left effect isn’t easy to do as it would require custom coding which is out of the scope of this forum. And yes I did take a quick look at the Elementor code. If it was simple I would’ve given it to you already.

    Thanks for your understanding πŸ™‚

    #932725
    Morgan

    1. Yes, that’s what I meant.

    2. Dude. We DON’T NEED THE CODE, we have a working Elementor Template.
    You CAN insert an Elements/Header template into a header right?
    In this very theme I’ve imported – that we were discussing at the beginning of *this very post*.
    In this Awaken themes Elements/Header template there’s Elementor-template-shortcode for the *header*.
    I don’t understand – it seems you’re unaware of this functionality in GP?
    Or it’s not possible to insert Elementor content into a nav? If so, why not?
    If so, how so?

    #932731
    Morgan

    Note: we could replace the entire Nav with an Elementor nav if we chose to, so it’s def possible.

    Hence, I don’t understand why I’ve repeated this same query in detail, how many times now, and I keep getting *computer says no* from you (‘little britain’ ref πŸ˜‰ ).
    https://media.giphy.com/media/JliGmPEIgzGLe/giphy.gif

    #932737
    Tom
    Lead Developer
    Lead Developer

    You can insert Elementor templates into our Hook Element: https://docs.generatepress.com/article/hooks-element-overview/

    So, you should be able to build a template for your fading logo, and then hook it into the inside_navigation hook.

    However, you’ll likely still need some CSS to position the template, and I’m not exactly sure how that kind of fade effect will work with a logo inside the navigation.

    #932751
    Morgan

    Thank you Tom, yes this is the insight I needed.

    I just spent quite some time repeating, creating a working demo, rephrasing and then seemingly educating your own support. And I’m a noob. Enough snark, moving on . . .

    I’m not sure what you mean re: CSS – the element is fixed on page vertically, and simply moves left 10px sideways on scroll-down + fade. Obvs Elementor is doing all the Jquery/CSS magic here.

    R u saying if it works on page it wont necessarily work in yr Nav?

Viewing 15 posts - 1 through 15 (of 21 total)
  • You must be logged in to reply to this topic.