- This topic has 11 replies, 2 voices, and was last updated 3 years, 7 months ago by
Tom.
-
AuthorPosts
-
August 19, 2017 at 7:05 am #369298
Zafiris
Hello Tom,
Thanks for your awesome work and support! Hope I don’t ruin your holidays!
I’m trying to achieve a navigation menu like this site:
https://www.etq-amsterdam.com/
As you can see it’s logo at the center, hamburger menu on desktop/mobile on the left and the bag at the right. Is the way to go the GP Hooks? Although it’s seems to be easy I haven’t managed to replicate it. Also do I need to do something specific to make it responsive as this site?
Thanks in advance!
Zafiris
GP Premium 1.4.3August 19, 2017 at 11:39 pm #369643Tom
Lead DeveloperLead DeveloperHmm, not that easy – but it’s a look I’d like to make easier.
Probably best if we work through it in steps.
1. Set up your navigation as your header: https://docs.generatepress.com/article/navigation-logo/
2. Enable the slide-out navigation: https://docs.generatepress.com/article/activating-slide-out-navigation/
3. Remove everything from your primary menu, so it’s completely empty.
Once you’ve done that, if you could link me to your site, we should be able to get the rest of the way π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentAugust 20, 2017 at 10:33 am #369922Zafiris
Hey Tom!
I followed your instructions, here is the site:
http://www.nataliabasdeki.com/
Thanks for your quick response!
August 20, 2017 at 11:13 am #369946Tom
Lead DeveloperLead DeveloperCan you upload a navigation logo, and enable the cart menu item in Customize > Layout > WooCommerce?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentAugust 20, 2017 at 11:31 am #369952Zafiris
Sure, just did it
August 20, 2017 at 11:46 pm #370178Tom
Lead DeveloperLead DeveloperGive this a shot:
li.slideout-toggle, li.wc-menu-item, .menu-toggle { position: absolute; left: 10px; top: 5px; } li.wc-menu-item, .mobile-bar-items.wc-mobile-cart-items { left: auto; right: 10px; top: 5px; float: none; } .site-logo.navigation-logo { display: inline-block; float: none; width: auto; } #site-navigation { position: relative; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentAugust 22, 2017 at 3:31 am #371080Zafiris
Awesome! I don’t know what kind of sorcery you did but that did the work!
3 more things, I promise I’ll be quick!
1. The logo doesn’t seem to be exactly centered, it looks a little bit on the left. Is there a way to be always centered?
2. The slideout menu is tranparent. Is it supposed to be like that or I can make it solid?
3. I want to change the layout of the menu items inside the slideout menu, to push them a little bit down. I can do this with CSS?
Thanks a lot!
August 22, 2017 at 11:39 pm #371687Tom
Lead DeveloperLead DeveloperYou could try this:
.site-logo.navigation-logo { position: absolute; left: calc( 50% β 150px); /* 50% from the left β half your image width */ }
Just be sure to adjust the 150px so it’s half of your image width.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentAugust 22, 2017 at 11:50 pm #371693Zafiris
Thx a lot Tom, I really appreciate your support.
For the other 2 questions should I open another topic?
August 23, 2017 at 9:57 am #372051Tom
Lead DeveloperLead DeveloperAh, sorry! Was late last night π
2. You can set your navigation color in Customize > Colors > Primary Navigation – these colors apply to the slide-out menu for now.
3. You can try this:
#generate-slideout-menu { padding-top: 50px; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentAugust 25, 2017 at 1:19 am #373219Zafiris
That did the job!
August 25, 2017 at 8:50 am #373372Tom
Lead DeveloperLead DeveloperAwesome π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.