- This topic has 11 replies, 2 voices, and was last updated 6 years, 8 months ago by Tom.
-
AuthorPosts
-
August 19, 2017 at 7:05 am #369298Zafiris
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
August 19, 2017 at 11:39 pm #369643TomLead 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 π
August 20, 2017 at 10:33 am #369922ZafirisHey 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 #369946TomLead DeveloperLead DeveloperCan you upload a navigation logo, and enable the cart menu item in Customize > Layout > WooCommerce?
August 20, 2017 at 11:31 am #369952ZafirisSure, just did it
August 20, 2017 at 11:46 pm #370178TomLead 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; }
August 22, 2017 at 3:31 am #371080ZafirisAwesome! 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 #371687TomLead 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.
August 22, 2017 at 11:50 pm #371693ZafirisThx 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 #372051TomLead 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; }
August 25, 2017 at 1:19 am #373219ZafirisThat did the job!
August 25, 2017 at 8:50 am #373372TomLead DeveloperLead DeveloperAwesome π
-
AuthorPosts
- You must be logged in to reply to this topic.