- This topic has 13 replies, 3 voices, and was last updated 2 years, 6 months ago by
Tom.
-
AuthorPosts
-
October 26, 2019 at 8:13 pm #1045615
Maciej
Trying to accomplish this nav menu layout:
http://www.squarespace.comIm on the latest GP Version
I currently have a header Element set up for transparent navigation.
I tried but no luck
.inside-navigation {
display: flex;
justify-content: space-between;
}.header-wrap .navigation-branding {
order: 1;
margin-right: auto;
}.header-wrap .main-navigation {
order: 2;
margin-left: auto;
margin-right: auto;
}.header-wrapr .secondary-navigation {
order: 3;
margin-left: auto;
}October 27, 2019 at 6:47 am #1045747David
StaffCustomer SupportHi there,
in the example there is logo / center nav / right nav – what is to be added to the righthand side of your site?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 31, 2019 at 7:08 pm #1050163Maciej
Sorry for the late response. I want to have the layout this way
Logo (aligned left) – 3 menu items center – 2 menu items aligned right
October 31, 2019 at 7:55 pm #1050181Maciej
Also I forgot to mention I am using navigation as header. And trying to make a sticky navigation.
I tried splitting the header into 3 sections, and was playing around with flex box but can’t seem to get it right. Any help would be greatly appreciated.
November 1, 2019 at 5:24 am #1050399David
StaffCustomer SupportCould you add the additional 2 menu items you want aligned right in your menu. The first of these two menu items can you add a CSS class of
push-right
Adding classes to menus: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes
Once done i can take a look at the CSS required.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/November 1, 2019 at 11:40 am #1050765Maciej
Ok I added the class but It didn’t push right for some reason.
November 1, 2019 at 1:16 pm #1050816Maciej
I got most of the way there but my 3 center items are not centered
November 2, 2019 at 7:17 am #1051234David
StaffCustomer SupportLooks like you figured it out?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 23, 2020 at 7:08 pm #1374225Maciej
Hello, Im back at it again. Lost my previous site so I needed to start over. Kinda stuck in the same place as last time.
pretty much trying to accomplish a 3 column nav bar.
July 24, 2020 at 1:42 am #1374451David
StaffCustomer SupportCan you share a link to your site so i can see where you got to ?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 24, 2020 at 7:03 am #1374698Maciej
July 24, 2020 at 1:52 pm #1375258Tom
Lead DeveloperLead DeveloperHi there,
Give this CSS a shot:
@media (min-width: 769px) { .nav-aligned-center .main-navigation.has-branding .inside-navigation { justify-content: flex-start; } .nav-aligned-center .navigation-branding { margin-right: auto; } .main-navigation:not(.slideout-navigation) .main-nav { flex-grow: 1; } .nav-aligned-center .main-navigation ul { display: flex; } li#menu-item-41 { margin-left: auto; } .nav-aligned-center .main-navigation ul > li:first-child { margin-left: auto; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJuly 24, 2020 at 2:06 pm #1375274Maciej
Tom, you are the man! THANK YOU
July 24, 2020 at 2:27 pm #1375298Tom
Lead DeveloperLead DeveloperYou’re welcome 🙂
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.