Support » Theme: GeneratePress » Make full width sticky Menu with Elementor

Viewing 13 replies - 1 through 13 (of 13 total)
  • Theme Author Tom

    (@edge22)

    Hi there,

    It’s possible with code, but you might want to check out our Menu Plus add-on: https://generatepress.com/downloads/generate-menu-plus/

    It handles the sticky nav, logo in the nav, and the mobile header.

    If you’re not interested in that I can try to help with code, but you’ll have to show me what you have so far (sticky menu etc..).

    Let me know πŸ™‚

    Hi Tom,

    as I am trying to learn new stuff in coding (I am not at all a coder) I would be glad to learn on practical thingsΒ΄.

    What would you need to help me out ? (Not ruling out, that I would buy the plugin to support your work πŸ˜‰ )

    Thanks in advance.
    Christian

    Theme Author Tom

    (@edge22)

    Hi Christian,

    This will help with adding a logo to the menu: https://generatepress.com/forums/topic/how-to-create-a-menu-bar-with-logo/

    You can make the menu sticky like this:

    .main-navigation {
        position: fixed;
        width: 100%;
        top: 0;
    }

    That’s very simplified.

    The Menu Plus add-on takes care of that stuff, and some of the complexities that come with a sticky menu (only sticking when it hits the top of the browser on scroll, not overlapping the admin bar etc..).

    Hopefully this is enough to get you started.

    Let me know πŸ™‚

    Hi Tom,

    Thanks for your help πŸ™‚

    The menu gets sticky, but there are multiple new problems arising. It still uses the (empty) header space, so I have a strange white bar under the menu space. (I haven’t tryed adding the logo, As I would prefer having a “working” menu first.

    Is there an easy way to have the body just get under he menu bar / having this white bar disappear ?

    If I can help with any information, please just tell me πŸ™‚

    Theme Author Tom

    (@edge22)

    Hmm, it sounds like you might need something a little more complex.

    Perhaps this plugin will help: https://en-ca.wordpress.org/plugins/sticky-menu-or-anything-on-scroll/

    The selector you want to stick is: #site-navigation

    Hi Tom,

    thanks for your help, I got it working thanks to this plugin.
    I also added the logo, but I can’t wrap my head around :
    – how to align it verticaly with the menu (maybe juste changing the size will be enough…);
    – how to position it a bit more on the right (again, may be solved in a bad way with a png and some transparency
    – and much more…

    It will be easier to just purchase your plugin πŸ˜‰ Thanks for your help !

    Theme Author Tom

    (@edge22)

    The plugin definitely makes it easier, but if you need help without it just let me know πŸ™‚

    Hi Tom,

    I momentarly reverted back to the default layout (under header menu) and styled it a bit using CSS to better suit my taste.

    Now I only have two (only…) problems left and I was wondering if you could help me πŸ™‚

    – after theming my menu (white background i.e) it also does it to the mobile menu, which really doesn’t look too great, as the shadow effect doesn’t work on mobile and so it is a bit confusing.
    How could I keep the original mobile menu theming (which would probably look great with minor separate theming for my use) ?

    – How can I only add my logo to the menu when it is hovering ? (and add it to the mobile menu when hovering) with some sort of seemless transition, where it pushes the menu buttons slightly to the right ?
    – > Another way would be to add an image as a menu item, but i would like it to be side-by-side with the hamburger menu on the mobile menu…

    Not sure if everything is quite understandable, I would be glad to read back from you πŸ™‚
    Thank you for this great theme and your big help !

    Theme Author Tom

    (@edge22)

    Hi there,

    You can style mobile menu separately using CSS.

    For example:

    .menu-toggle {
        background-color: #222222;
        color: #FFF;
    }

    This is a little more tough. Are you wanting the logo in the main navigation as well as the mobile navigation?

    Hi Tom,

    I didn’t quite get your last answer…

    What are the correct CSS hooks for the mobile menu ?

    Concerning the logo, it would be great to have the option, I haven’t chosen the exact pattern for the moment and will probably need to test to find the right way (and if I annoy you, just say it πŸ˜‰ I don’t want to take too much of your time).

    Thanks,
    Christian

    Theme Author Tom

    (@edge22)

    The CSS I provided above will change the background color and text of your mobile menu button. Maybe you’re wanting all of the colors to change on mobile even when you open the mobile menu?

    The Menu Plus add-on allows you to display the logo in the navigation on mobile, desktop or both. With that, it would take a little custom CSS to only display it on hover.

    It’s possible without the add-on as well, it just takes some custom PHP and CSS: https://generatepress.com/forums/topic/how-to-create-a-menu-bar-with-logo/#post-121558

    Hi Tom,

    please excuse my long absence, I just didn’t have time to get back to the website.
    Please also excuse my dumb question, I finaly got it, but there semms to be a problem because the color change doesn’t really stick. When I click the menu on mobile (which is now black on white background, it fades away to white (still on white background) and stays cickable.

    Another question you might be able to answer (I am really a beginner, I understand if you don’t want to bear with me πŸ˜‰ )
    I added a border under my menu elements to show the actually clicked page etc, the problem is that now when I hover above a menu point, the hover color fades in on the element AND on the underlying border, making for a bizarre transition. Maybe you will better understand it while looking at the page : dev.immo-k.eu.

    Thanks again for your help. I speak about Generatepress to all the people I know doing something with wordpress and some allready are jumping ship ^^

    Theme Author Tom

    (@edge22)

    Ah, to change the inside of the navigation on mobile when you open it, you’ll need to wrap this CSS in a media query and change the colors: https://gist.github.com/generatepress/793804f553c25c70823c

    So it would be:

    @media (max-width: 768px) {
        /* Above altered CSS in here */
    }

    Ah, if you’re adding a border on hover, you’ll want to add a transparent border without hover in order to avoid the jump:

    .main-navigation .main-nav ul li > a {
        border-bottom: 4px solid transparent;
    }

    Hope this helps πŸ™‚

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Make full width sticky Menu with Elementor’ is closed to new replies.