Docs

[johantorell]

Hi!

I have a transparent navbar, fixed on mobile/burger meny – always. I’m happy with the look and effect, but the problem is that it doesn’t look the same on the subpages of my site. There is a white background in the navbar instead of transparent (se images), also the header image doesn’t stretch all the way up (behind the navbar). Also the navbar doesn’t follow when i scroll down on page. I’m working with my webpage offline using mamp, it’s hard for me to send you any information, but i will write the code i’m using + images of the problem.

Hope you @ theme.co can help me!

/*Transparent header - */
// css
.x-navbar{
background-color: transparent !important;
}
.x-topbar {
background:transparent!important;
}
/*Navbar-color on scroll - */
.x-navbar-fixed-top {
background-color: #000000 !important;
}

/*Navbar transparent - start / solid when scroll - with transition */
// css -
x-navbar {
background: transparent !important;
transition: 0.2s all linear;
}
.x-navbar.x-navbar-fixed-top {
transition: 0.2s all linear;
background: rgba(0,0,0, 1.1) !important;
}

Burger/Mobile sticky icky xD //

@media only screen and (max-width:1085px){
.x-nav-wrap.desktop {
display: none;
}
.x-btn-navbar {
display: block;
float: right;
}
.x-nav-wrap.mobile.in,
.x-nav-wrap.mobile.collapsing {
display: block;
}
body.x-navbar-fixed-top-active .x-navbar-wrap {
height: auto;
}
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
position: relative;
top: 0;
}
}

Kind regard,
Johan

[johantorell]

The images were to large, you should let the user know if the files are to large and doesn’t upload.

anyway here are the images in smaller file size.

[Rupok]

Hi Johan,

Thanks for writing in! Your code looks fine although first two blocks are duplicate code. It’s really hard to assist on such issue without checking the URL because we don’t know what adding the background color to other pages as your code looks fine. So when you are ready to go online, you can update us and surely we will assist you to get it done. You can continue with other development till you go online.

Cheers!

[Author]

Posts