Move Primary Menu to top of Header

This topic has 4 replies, 2 voices, and was last updated 7 years, 11 months ago by Mahesh.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
December 14, 2016 at 7:52 am #105321

Janet
Participant

Hi,

I’m using Parallal Frame Pro and working on a site. I need to have the primary menu display at the top of the header, above the logo and tagline. I thought there was a setting for this and I’m not finding it now. Is there one, or do I need to change this in the CSS? I appreciate your help!

Thanks!

December 14, 2016 at 12:08 pm #105341
Mahesh
Participant
@janetmmorris: Go to Dashboard=> Appearance=> Customize=> Additional CSS and add the following CSS:
```
#masthead .wrapper { 
    display:flex; 
    flex-direction: column;
}
#site-branding { 
    order: 2 ;
}
.nav-primary { 
    order: 1 ;
}
```
Regards,
Mahesh
December 14, 2016 at 4:54 pm #105359

Janet
Participant

Thank you!!!!

December 14, 2016 at 6:20 pm #105362

Janet
Participant

Hi again…

Sorry but after closer look I realized that although it fixed the vertical placement of the menu, it moved the menu horizontally, so it’s no longer right aligned. Additionally the overall height of the fixed header is too large, overlapping & covering content on other pages (example – About Us page). I’ve tried using the smallest size logo possible, but still the header height does not change. Is there a way I can fix this as well? Here’s a link to the sight I’m working on – https://www.monroecountysoroptimist.org/

Again, thank you for your help, I appreciate it!!

Thanks,
Janet

December 15, 2016 at 10:22 am #105385
Mahesh
Participant
@jaetmmorris: For menu aligned to right, add the following CSS:
```
.menu.parallax-frame-nav-menu {
    float: right;
}
```
And for decreasing the height, add the following CSS:
```
.header-background .nav-primary .menu a {
    padding: 15px 20px;
}

.header-background #site-branding {
    padding: 0 0 10px;
}
```
Regards,
Mahesh
Author

Posts