[Janet]

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!

[Mahesh]

@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

[Janet]

Thank you!!!!

[Janet]

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

[Mahesh]

@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