Header coming under fixed nav while scrolling up

shootingstar · July 5, 2024, 11:50am

Hi i jus want to fix this.am a newbie.i

ILM · July 5, 2024, 12:35pm

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

shootingstar · July 5, 2024, 12:54pm

i do have fixed navbar and above it i have header with logo and sme address social icons etc.the issue is while scrollindown everything is fine but wen i scroll from down to up the above header logos and other things in header comes under fixed nav.i mean if logo is skb eg sme part of image coming under navbar.hope u got what i described.

albert_kucz · July 5, 2024, 1:14pm

Welcome. Thank you for posting. Use the back ticks ( ` ) three times. Copy and paste your code and then close is with three back ticks. Others will be able to look through your code and locate the problem. I had to learn how to do this myself when I started. Happy coding.

shootingstar · July 8, 2024, 4:27am

body{
    font-family:'Montserrat', sans-serif !important;
     color:#222222;
     font-size:16px !important;
}
 h1,h2,h3,h4,h5,h6,p,ul{
    margin:0;
    padding:0;
}
 h1,h2,h3,h4,h5,p, ul li, a, input,textarea, select{
    font-family:'Montserrat', sans-serif;
}
 ul{
    list-style-type:none;
}
 p, ul li{
    font-size:16px;
    color:#848484;
    line-height:26px;
    font-weight:300;
}
 a{
    text-decoration:none;
    display:inline-block;
    outline:none;
}
 a:hover,a:focus,a:visited{
    text-decoration:none;
    outline:none;
}
 img{
    display:inline-block;
}
 button{
    border:none;
    outline:none;
    box-shadow:none;
    display:block;
    padding:0;
    background:transparent;
}
 input,textarea{
    display:block;
    font-size:16px;
    line-height:28px;
    outline:none;
    box-shadow:none;
    -webkit-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
 @media (min-width:1200px){
    .container{
        padding:0;
    }
}
 .boxed_wrapper{
    width:100%;
    background:#fff;
    overflow-x:hidden;
}
 .sec-padd{
    padding:80px 0 80px;
}
 .sec-padd2{
    padding:80px 0 30px;
}
 .sec-padd-top{
    padding-top:80px;
}
 .sec-padd-bottom{
    padding-bottom:80px;
}
 .no-padd{
    padding:0px;
}
 .clear_fix{
    clear:both;
}
 .clear_fix:after{
    display:table;
    content:'';
    clear:both;
}
 .list_inline li{
    display:inline-block;
}
 .social li{
    display:inline-block;
    font-size:14px;
    padding:0 10px;
}
 .social li a{
    color:#fff;
    transition:.5s ease-in-out;
    font-size:14px;
}
 .default_link{
    font-size:14px;
    text-transform:uppercase;
    font-family:'Montserrat', sans-serif;
    color:#fdc716;
}
 .default_link:hover{
    color:#fdc716;
}
 .default_link i{
    margin-left:3px;
    font-weight:700;
    font-size:18px;
    position:relative;
    top:1px;
}
 .default-overlay-outer{
    position:absolute;
    display:block;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    padding:10px;
    transition:all 700ms ease;
    -webkit-transition:all 700ms ease;
    -ms-transition:all 700ms ease;
    -o-transition:all 700ms ease;
    -moz-transition:all 700ms ease;
}
 .default-overlay-outer .inner{
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    display:table;
    vertical-align:middle;
    text-align:center;
}
 .default-overlay-outer .inner .content-layer{
    position:relative;
    display:table-cell;
    vertical-align:middle;
    color:#ffffff;
}
 .rating{
    font-size:14px;
    color:#fdc716;
}
 .uppercase{
    text-transform:uppercase;
}
 .padd-80{
    padding-top:80px;
}
 .padd-20{
    padding:20px 0;
}
 .tran5{
    -webkit-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
}
 .center{
    text-align:center;
}
 .row-5{
    margin:0 -5px;
}
 .row-10{
    margin:0 -10px;
}
 .thm-color{
    color:#00399C;
}
 .bold{
    font-weight:700;
}
 .s-bold{
    font-weight:600;
}
 .m-bold{
    font-weight:600;
}
 .float_left{
    float:left;
}
 .float_right{
    float:right;
}
 .border-bottom{
    border-bottom:1px solid #f7f7f7;
}
 @media (min-width:1200px){
    .container{
        padding:0;
    }
}
 .thm-btn{
    font-size:16px;
    font-weight:600;
    text-transform:uppercase;
    font-family:'Montserrat', sans-serif;
    position:relative;
    transition:all 0.5s ease 0s;
    cursor:pointer;
    padding:0 30px;
    line-height:50px;
    display:inline-block;
    text-align:center;
    z-index:1;
}
 .thm-btn:hover{
    color:#fff;
}
 .thm-btn:before{
    background-color:#444;
    content:"";
    height:100%;
    left:0;
    opacity:0;
    position:absolute;
    top:0;
    transform:scale(0.5, 1);
    transition:all 0.4s ease 0s;
    width:100%;
    z-index:-1;
}
 .bg-clr1{
    background:#0130a2;
    color:#fff;
}
 .thm-btn:hover::before{
    opacity:1;
    -webkit-transform:scale(1, 1);
    transform:scale(1, 1);
}
 .bg-clr2{
    background:#222;
    color:#fff;
    position:relative;
}
 .bg-clr2:before{
    background-color:#0130a2;
    content:"";
    height:100%;
    left:0;
    opacity:0;
    position:absolute;
    top:0;
    transform:scale(0.5, 1);
    transition:all 0.4s ease 0s;
    width:100%;
    z-index:-1;
}
 .bg-clr2:hover:before{
    opacity:1;
    -webkit-transform:scale(1, 1);
    transform:scale(1, 1);
}
 .prealoader{
    position:fixed;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    z-index:999999999999;
    background-color:rgba(255,255,255,1);
    background-position:center center;
    background-repeat:no-repeat;
    background-image:url(../images/icon/preloader.gif);
}
 @-webkit-keyframes menu_sticky{
    0%{
        margin-top:-100px;
    }
     50%{
        margin-top:-90px;
    }
     100%{
        margin-top:0;
    }
}
 @keyframes menu_sticky{
    0%{
        margin-top:-100px;
    }
     50%{
        margin-top:-90px;
    }
     100%{
        margin-top:0;
    }
}
 .mainmenu-area.stricky-fixed{
    position:relative;
    top:0;
    left:0;
    margin:0;
    width:100%;
    background:#fff;
    z-index:99999;
    -webkit-animation-name:menu_sticky;
    animation-name:menu_sticky;
    -webkit-animation-duration:0.60s;
    animation-duration:0.60s;
    -webkit-animation-timing-function:ease-out;
    animation-timing-function:ease-out;
    box-shadow:-8px 8px 20px 0px rgba(0, 0, 0, 0.08);
}
 .scroll-to-top{
    background:#fdc716;
    border:2px solid #fdc716;
    bottom:25px;
    color:#fff;
    cursor:pointer;
    display:none;
    font-size:30px;
    font-weight:normal;
    height:35px;
    line-height:35px;
    position:fixed;
    right:15px;
    text-align:center;
    transition:all 500ms ease 0s;
    width:45px;
    z-index:99999;
    -webkit-box-shadow:0px 8px 23px -6px rgba(27,27,27,1);
    -moz-box-shadow:0px 8px 23px -6px rgba(27,27,27,1);
    box-shadow:0px 8px 23px -6px rgba(27,27,27,1);
}
 .scroll-to-top:hover{
    background:#33343f;
}
 .anim-3,.anim-3-all *{
    transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -webkit-transition:all 0.3s ease;
    -ms-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
}
 .anim-5,.anim-5-all *{
    transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -webkit-transition:all 0.5s ease;
    -ms-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
}
 .anim-7,.anim-7-all *{
    transition:all 0.7s ease;
    -moz-transition:all 0.7s ease;
    -webkit-transition:all 0.7s ease;
    -ms-transition:all 0.7s ease;
    -o-transition:all 0.7s ease;
}
 .section-title{
    position:relative;
    margin-bottom:50px;
}
 .section-title h2{
    position:relative;
    text-transform:capitalize;
    font-weight:600;
    padding-bottom:20px;
}
 .section-title h3{
    position:relative;
    text-transform:capitalize;
    font-weight:600;
    padding-bottom:20px;
}
 .section-title h4{
    position:relative;
    font-size:20px;
    text-transform:capitalize;
    font-weight:600;
    padding-bottom:20px;
}
 .section-title:after{
    content:"";
    position:absolute;
    bottom:0px;
    left:0;
    width:70px;
    height:1px;
    background:#f8b864;
}
 .section-title.center:after{
    left:50%;
    margin-left:-35px;
}
 .scroll-top{
    width:60px;
    height:60px;
    position:fixed;
    border-radius:50%;
    bottom:30px;
    right:30px;
    z-index:99;
    display:none;
    color:#fdc716;
    background:#10252e;
    text-align:center;
    border:2px solid #19333e;
}
 .scroll-top span:before{
    font-size:27px;
}
 .scroll-top:after{
    position:absolute;
    z-index:-1;
    content:'';
    top:100%;
    left:5%;
    height:10px;
    width:90%;
    opacity:1;
    background:-webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%);
    background:-webkit-radial-gradient(center ellipse, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%);
    background:radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%);
}
 .preloader{
    position:fixed;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    z-index:999999;
    background-color:#ffffff;
    background-position:center center;
    background-repeat:no-repeat;
    background-image:url(../images/icon/preloader.gif);
}
 .video-image-box{
    position:relative;
}
 .video-image-box .image{
    position:relative;
}
 .video-image-box img{
    display:block;
    width:100%;
}
 .video-image-box .image .overlay-link{
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    color:#ffffff;
    text-align:center;
    background:rgba(0,0,0,0.10);
    transition:all 500ms ease;
    -moz-transition:all 500ms ease;
    -webkit-transition:all 500ms ease;
    -ms-transition:all 500ms ease;
    -o-transition:all 500ms ease;
}
 .video-image-box .image .overlay-link:hover{
    background:rgba(72, 199, 236, 0.9);
}
 .video-image-box .image .overlay-link .icon{
    position:absolute;
    left:50%;
    top:50%;
    margin-top:-25px;
    margin-left:-25px;
    width:58px;
    height:41px;
    line-height:43px;
    font-size:60px;
    color:#f7f7f7;
}
 .top-bar-area{
    background:#292929;
    padding:7px 0 8px;
}
 .top-bar-area p{
    color:#fff;
    font-size:14px;
    line-height:24px;
    margin:6px 0;
}
 .top-bar-area p i{
    color:#fdc716;
    margin-right:8px;
}
 .header-area{
    padding:24px 0 60px;
}
 .header-area.style-2{
    padding:0px 0;
}
 .header-area.style-2 .logo{
    margin-top:14px;
}
 .header-contact-info{
    overflow:hidden;
}
 .logo-text{
    float:right;
    font-weight:600;
    color:#00399C;
    padding:20px 70px 0 0;
    font-size:18px;
    text-transform:uppercase;
}
 .logo-text span{
    letter-spacing:13px;
    padding-bottom:5px;
}
 .header-contact-info ul{
}
 .header-contact-info ul li{
    border-right:1px solid #f7f7f7;
    display:inline-block;
    float:left;
    margin-right:30px;
    padding-right:30px;
    position:relative;
    padding-top:4px;
    padding-bottom:2px;
}
 .header-contact-info ul li:last-child{
    margin-right:0;
    border-right:none;
    padding-right:0;
}
 .header-contact-info ul li .iocn-holder{
    width:48px;
    border:1px dashed #fdc716;
    border-radius:50%;
}
 .header-contact-info ul li .iocn-holder span{
    color:#00399C;
    display:block;
    font-size:24px;
    font-weight:500;
    height:48px;
    line-height:48px;
    text-align:center;
    transition:all 500ms ease 0s;
    width:48px;
}
 .header-contact-info ul li .iocn-holder span.top-envelop{
    font-size:40px;
}
 .header-contact-info ul li:hover .iocn-holder span{
    color:#2b2c36;
}
 .header-contact-info ul li .iocn-holder, .header-contact-info ul li .text-holder{
    display:table-cell;
    vertical-align:middle;
}
 .header-contact-info ul li .text-holder{
    padding-left:10px;
}
 .header-contact-info ul li .text-holder h6{
    color:#222222;
    font-size:14px;
    font-weight:600;
    text-transform:capitalize;
    margin:0 0 10px;
}
 .header-contact-info ul li .text-holder p{
    color:#999;
    font-size:12px;
    font-weight:400;
    margin:0;
    line-height:16px;
}
 .top-social-links{
    float:right;
    margin:15px 0;
}
 .top-social-links li{
    display:inline-block;
    margin:0 0 0 15px;
}
 .top-social-links li:first-child{
    margin:0;
}
 .top-social-links li a i{
    color:#999;
    font-size:16px;
    transition:all 500ms ease;
}
 .top-social-links li a:hover i{
    color:#fdc716;
}
 .mainmenu-area{
    margin-bottom:-35px;
    margin-top:-35px;
    position:relative;
    z-index:999999;
}
 .header-area.style-2 .mainmenu-area{
    margin:0
}
 .header-area.style-2 .main-menu .navbar-header{
    padding:20px 0;
}
 .header-area.style-2 .logo{
    margin-top:14px;
    position:absolute;
    right:0;
    top:0px;
    z-index:9999999;
}
 .mainmenu-area .mainmenu-bg{
    position:relative;
    background:#292929;
    transition:all 0.5s ease 0s;
}
 .main-menu{
    position:relative;
}
 .main-menu.style-2{
    float:right;
}
 .main-menu .navbar-collapse{
    padding:0px;
}
 .main-menu .navigation{
    margin:0;
    position:relative;
    font-family:'Montserrat', sans-serif;
    display:table;
    width:100%;
    height:100%;
}
 .main-menu .navigation li{
    padding:0;
    position:relative;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
 .main-menu .navigation li:first-child{
}
 .main-menu .navigation li.home a{
    background:#fdc716 none repeat scroll 0 0;
    font-family:'FontAwesome';
    font-size:24px;
    padding:19px 24px 18px;
}
 .main-menu .navigation li.home a span{
    color:#fff;
}
 .main-menu .navigation li a{
    color:#ffffff;
    display:block;
    font-size:14px;
    font-weight:600;
    line-height:30px;
    opacity:1;
    padding:19px 0px 18px;
    position:relative;
    text-transform:uppercase;
    transition:all 500ms ease 0s;
}
 .main-menu.style-2 .navigation li a{
    color:#222;
    padding:35px 0;
}
 .main-menu.style-2 .navigation li:last-child a{
    margin-right:0px;
}
 .main-menu .navigation > li.dropdown > a{
}
 .mainmenu-area.stricky-fixed .main-menu .navigation > li:first-child > a{
}
 .main-menu .navigation li.current.home a, .main-menu .navigation li:hover.home a{
    background:#2b2c36;
}
 .main-menu .navigation > li.dropdown > a:after{
}
 .main-menu .navigation > li:hover > a, .main-menu .navigation > li.current > a{
    color:#fdc716;
    opacity:1;
}

this is my cs…i just removed my fixed navbar.now i want to make it back fixed.wen i try to redo its not wrking.please have a look and help me

ILM · July 8, 2024, 7:15am

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

system · January 6, 2025, 7:16pm

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Fixed header and internal navigation links HTML-CSS	6	1894	March 9, 2021
Scrolling nav position problems because fixed menu HTML-CSS	5	5069	March 9, 2021
Why isnt my header coming together like a banner	7	529	June 1, 2021
I need help with my page HTML-CSS	4	270	July 22, 2021
Landing Page How to fix my navbar to stop overlap the other context, HTML-CSS	6	2911	September 18, 2023

Header coming under fixed nav while scrolling up

Related topics