Docs

[cmiller2121]

Hi, I need help moving the “link” nav “red” colored bar above the menu.
Here is an example of it and a picture.
http://caseydmiller.com/blog/

[Christian]

Hey there,

Please add the code below in your Appearance > Customize > Custom > Global CSS

.x-navbar {
    border-top: 2px solid rgba(255,255,255,0.5);
    background-color: #333;
}
.x-navbar .desktop .x-nav>li>a:hover, .x-navbar .desktop .x-nav>.x-active>a, .x-navbar .desktop .x-nav>.current-menu-item>a {
    box-shadow: -0px -4px 0px -2px #dd0000 !important;
}

Thanks.

[cmiller2121]

Hi, for some reason this did not work. Any other ideas?
Thanks

[cmiller2121]

Here is all the css from the customize box that i have added or that was already there, just in case there is an issue.

/*
// Buttons
*/

.x-btn {
font-weight: 700;
}

.x-btn.x-btn-alt,
.button.x-btn-alt,[type=\”submit\”].x-btn-alt {
border-color: #02aed6;
background-color: #02aed6;
box-shadow: 0 0.25em 0 0 #0b8ead, 0 4px 9px rgba(0, 0, 0, 0.75);
}

.x-btn.x-btn-alt:hover,
.button.x-btn-alt:hover,[type=\”submit\”].x-btn-alt:hover {
border-color: #0b8ead;
background-color: #0b8ead;
box-shadow: 0 0.25em 0 0 #097690, 0 4px 9px rgba(0, 0, 0, 0.75);
}

/*
// Dropcap
*/

.x-dropcap {
background-color: #02aed6;
}

/*
// Headings – Dark section
*/

.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.dark-section h5,
.dark-section h6,
.dark-section h1 a,
.dark-section h2 a,
.dark-section h3 a,
.dark-section h4 a,
.dark-section h5 a,
.dark-section h6 a {
color: #fff;
}

.dark-section h1 a:hover,
.dark-section h2 a:hover,
.dark-section h3 a:hover,
.dark-section h4 a:hover,
.dark-section h5 a:hover,
.dark-section h6 a:hover {
color: #fff;
opacity: 0.65;
}

/*
// Sidebar
*/

.widget a {
color: #02aed6;
}

/*
// Contact Form 7
*/

.wpcf7-form {
margin: 0;
}

.single-post .entry-featured {
display:none;
}

.blog .entry-wrap, .single-post .entry-wrap {
padding-top: 100px;
}

.x-brand.text {
display: none;
}

.x-brand.img {
display: none;
}

.masthead .x-container-fluid {
max-width: none;
width: 100%;
}

.x-navbar .x-container.max {
max-width: 100%;
}

body .x-navbar .x-nav-wrap.desktop .x-nav li {
float: none;
display: inline-block;
}

body .x-navbar .x-nav-wrap.desktop .x-nav {
width:100%;
text-align:center;
}

.x-colophon.bottom .x-social-global a {
font-size: 3.4rem;
height: 40px;
line-height: 40px;
width: 40px;
}

@media(max-width: 979px){
.x-navbar {
position: absolute;
width: 100%;
bottom: 0;
}

.x-navbar {
border-top: 2px solid rgba(255,255,255,0.5);
background-color: #333;
}
.x-navbar .desktop .x-nav>li>a:hover, .x-navbar .desktop .x-nav>.x-active>a, .x-navbar .desktop .x-nav>.current-menu-item>a {
box-shadow: -0px -4px 0px -2px #dd0000 !important;
}

[Thai]

Hi There,

Please find this CSS:

@media(max-width: 979px){
.x-navbar {
position: absolute;
width: 100%;
bottom: 0;
}

.x-navbar {
border-top: 2px solid rgba(255,255,255,0.5);
background-color: #333;
}
.x-navbar .desktop .x-nav>li>a:hover, .x-navbar .desktop .x-nav>.x-active>a, .x-navbar .desktop .x-nav>.current-menu-item>a {
box-shadow: -0px -4px 0px -2px #dd0000 !important;
}

And change to this:

@media(max-width: 979px){
.x-navbar {
position: absolute;
width: 100%;
bottom: 0;
}
}

.x-navbar {
border-top: 2px solid rgba(255,255,255,0.5);
background-color: #333;
}
.x-navbar .desktop .x-nav>li>a:hover, .x-navbar .desktop .x-nav>.x-active>a, .x-navbar .desktop .x-nav>.current-menu-item>a {
box-shadow: -0px -4px 0px -2px #dd0000 !important;
}

Hope it helps 🙂

[cmiller2121]

Hi that worked but now I have an issue with the scroll bar as seen in the picture. I have a couple pages where I have the slide revolution fullscreen with no footer and now with the bar moved to the top it’s causing a scroll issue. Can I remove the blank bar space below? http://caseydmiller.com/hi-tech-pdr-locations/
Thanks

[cmiller2121]

Hi, quick update, another issue that is occurring is on mobile, my menu is not loading upward as you current website does. It now loads downward. I did have it set up to load like your website. I would like for the red nav bar to be placed on top and have the menu load as it does on your website.
Thanks

[Joao]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

[cmiller2121]

This reply has been marked as private.

[Nabeel A]

Hi again,

1. To fix the scrollbar issue, add the following code in your Customizer:

body {
    overflow: hidden !important;
}

2. You site loads fine in mobile devices, can you please share a screenshot of what you’re seeing so we can take a closer look?

Thanks!

[cmiller2121]

Hi, as you can see in the screen shot that the menu is now opening downward which causes a layout issue in mobile. Prior to moving the menu border, the menu would open upward and downward depending on the menu location. I would like the menu to open upward filling the screen as your website currently does on the home page in mobile.

[cmiller2121]

Here is the image.

[cmiller2121]

Hi, I seemed to fix the issue with the menu not changing directions. One last question. Since I have slide revolution above the menu on the pages, how can I get the menu to stay at the top of the screen on mobile on blog post? Currently, the menu displays on the bottom until I start to scroll down and then the menu sticks to the top.
Thanks,
Casey

[Christopher]

Hi there,

Please add this code :

@media (max-width:979px){
.single-post .x-navbar {
    position: relative;
}
}

Hope it helps.

[Author]

Posts