[Resolved] Sticky Vertical Menu on the Left.

[hichb]

Hello.

I hope you’re doing well?

I’m gathering some information for a project that would have these two features:

A Sticky Vertical Menu on the left that goes horizontally on mobile devices to make it responsive. Here’s the demo: https://pixelbin.com/
A vertical Scroll effect for each section built with Elementor such as this: https://conversion.com/
I’d like to know if this is doable using Elementor and GeneratePress?

Thanks a lot for your help!

[David]

Hi there,

the Slideout Site in our library is similar to the first requirement:

https://generatepress.com/site-library/

With GP Premium 1.8 the slideout can now be converted to a full screen overlay.

The second requirement looks like its using fullpage.js

https://github.com/alvarotrigo/fullPage.js/#fullpagejs

I have seen other users use this with GP and Elementor.

[hichb]

Hi David,
Thanks a lot for your help!
That looks interesting and close to what I wish to achieve!
I was trying the Slideout Site as suggested from the Library, I can’t find a way to add the logo on the menu on the left.

[hichb]

Also, for this particular project, I want to display only the logo for the moment (no hamburger menu) since the website is only one page.

[Tom]

Hi there,

Any chance you can link us to your site with the logo added so we can see why it’s not working?

Let me know 🙂

[hichb]

Hey Tom!
Yes, sure here’s the link to the testing site: http://gsolution.co/
I added the Logo as usual through customize > site identity
Thank you 🙂

[Tom]

Hmm, yea – it’s not built for that by default. Would you like the logo before or after the menu icon?

[hichb]

I’d like the logo first and then if possible hide the hamburger menu since it’s going to be only one page. So no need of the hamburger menu.

[Tom]

To remove the menu you can disable the off canvas panel: https://docs.generatepress.com/article/off-canvas-panel-overview/

Then to add the image, you can:

1. Create a Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
2. Set the hook to inside_navigation
3. Add this as your content:

<div class="custom-logo">
    <img src="URL TO YOUR IMAGE HERE" alt="" />
</div> 

Then add this CSS:

.custom-logo {
    text-align: center;
    padding: 10px;
}

[hichb]

Great! Almost there 🙂
Been able to insert the logo but have a couple of problems:
1. Logo is not visible on Mobile Phone (still have the hamburger menu on mobile devices)
2. Logo is not clickable.
3. The social icons at the bottom of the bar for the desktop menu are no more positioned correctly.
Here’s the link to the testing site to see how it looks: http://gsolution.co/
Many thanks!

[David]

Hi there,

1. Customizer > Layout > Header – you can add an image for your Mobile Header Logo.
2. You would need to include the link in your custom logo HTML like so:

<div class="site-logo">
    <a href="URL TO HOME PAGE" rel="home">
        <img src="URL TO YOUR IMAGE HERE" alt="" />
    </a>
</div>

3. In Customizer > Additional CSS look for this:

#site-navigation .main-nav > ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100vh;
}

Change the min-height: 100vh; to min-height: calc(100vh - 96px);

The 96px is the height of your current logo.

[hichb]

Thank you so much! The only thing left now is how to center the logo on the mobile menu.
Since I disabled/hided the hamburger button (I don’t need a menu it’s a one page site) the logo is on the left.

[David]

Try this CSS:

#mobile-header .menu-toggle {
    display: none;
}

.site-logo.mobile-header-logo {
    margin-left: auto;
}

[hichb]

Fantastic!
Great support, many thanks. 🙂

[David]

Glad we could be of help

[Author]

Posts