Docs

[sean12]

Hello,

I am trying to modify the nav bar. I have read several threads and I am getting closer to what I need.

Site:
http://www.henrysegerstrom.org/

Questions:

1) How do I make my nav bar stick to the top of a page now that I have created a transparent backing.

The custom code I am using is:

.x-logobar, .x-navbar, .x-navbar .sub-menu { background: transparent !important; }
body .x-navbar {
background-color: rgba(220, 218, 218, 0.0) !important;
}

body.x-navbar-fixed-top-active .x-navbar-wrap {
position: fixed;
width: 100%;
z-index:99999;

2) My drop down menus – they are left aligned. Can I get this right aligned?

3) My drop down menus – I would like to make them rest on an opaque background.

Thank you in advance for your help.

[Paul R]

Hi,

Thanks for writing in!

1. Select Fixed Top as Navbar Position under Header in the customizer

2&3.

You can add this under Custom > CSS in the Customizer.

.masthead-inline .x-navbar .desktop .sub-menu {
    background: red !important;
    left: 0;
    right: auto;
    top: 100px;
}

Change red with the color that you like.

Hope that helps

[sean12]

Hi,

Thank you for the reply.

Notes:
1) Selecting Fixed Top as Navbar Position under Header in the customizer does not make the nav bar stay on top. Could this be due to my custom css? (See below) I am using this on henrysegerstrom.org

2)The drop down menu is not aligning with the nav menu item…

3) This works. Thank you.

.x-logobar, .x-navbar, .x-navbar .sub-menu { background: transparent !important; }
body .x-navbar {
background-color: rgba(220, 218, 218, 0.0) !important;
}

body.x-navbar-fixed-top-active .x-navbar-wrap {
position: fixed;
width: 100%;
z-index:99999;

}
Enleve date de portfolio scroll over image

.x-portfolio .entry-cover-content .entry-title-portfolio+span {
display: none;
}

Enleve inscription de portfolio scroll over image

.x-portfolio .entry-cover-content span {
display: none;
}
.x-portfolio .entry-cover-content {
color: transparent;
}
.single-x-portfolio .entry-header { display: none; }

.single .entry-featured {
display:none;
}
.single-x-portfolio .entry-featured {
display: none;
}

.x-portfolio .entry-info {
width: 100%;
float: none;
margin-bottom: 20px;
}

.x-portfolio .entry-extra {
float: none;
width: 100%;
}

ul.sub-menu {
text-align: right;
}

ul.sub-menu li a {
font-size: 15px;
}

.masthead-inline .x-navbar .desktop .sub-menu {
background: rgba(220, 218, 218, 0.5) !important;
left: 0;
right: auto;
top: 100px;
}

[Rad]

Hi there,

1. Do you mean that menu should follow as you scroll? Staying on top as a static menu? If yes, then do the reverse, choose static instead of fixed. And if yes, then you should remove this too

body.x-navbar-fixed-top-active .x-navbar-wrap {
position: fixed;
width: 100%;
z-index:99999;

}

2. Right aligned sub menu? Please change it to this,

.masthead-inline .x-navbar .desktop .sub-menu {
    background: red !important;
    right: 0;
    left: auto;
    top: 100px;
}

Hope this helps.

[Author]

Posts