• I really need some help!
    I would like to make just the top area of the header sticky (and not the menu)
    Adding this, all the header fixes

    .site-header {
    position: fixed;
    height: 110px;
    width: 100%;
    z-index: 1000;
    padding-bottom: 10px;
    }

    Any thoghts?

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • This should get you to a good start, may need some additional tweaking

    .site-header > .container {
        position: fixed;
        height: 110px;
        z-index: 1000;
        padding-bottom: 0px;
        background-color: white;
        max-width: 100%;
    }
    
    .site-header .container .row {
        width: 1180px;
        margin: auto;
    }
    
    .site-header .udyama-navbar {
        position: absolute;
        top: 110px;
        z-index: 1;
        max-width: 100%;
        width: 100%;   
    }
    Thread Starter Fabiola Ferreira

    (@fabiolabf)

    Jarret.. thanks! It’s almost working! I’m trying to configurate it!

    Could I please make another question?
    Is there any simple way to change the proportion between logo area x widget area on header?

    The infos doesn’t fit because the logo area is so large!

    https://ibb.co/Dg5yryr
    https://oltransportes.com/

    I don’t now how to code .. is there a way of change it on css or using the Real-Time Find and Replace?

    I’m really really gratefull for your help!

    If you’re talking about decreasing the width of the highlighted area in your screenshot you can try out this

    .site-header .container .col-md-4 {
        max-width: 25%;
    }

    And adjust the 25% value accordingly

    Thread Starter Fabiola Ferreira

    (@fabiolabf)

    Genius! It works! Thanks!
    Just the size of each widget is still small =/

    Hmm not exactly sure what you’re trying to do, but maybe something like this will help?

    .site-header .container .widget_custom_html {
        width: 280px;
    }
    Thread Starter Fabiola Ferreira

    (@fabiolabf)

    I need that all infos stay in just 2 lines.

    The 3 last widgets are right now… but the first one, where says “R. Jo?o Pessoa, 60
    sala 125 – Santos, SP” doesn’t fit and gets 4 lines!

    Maybe if I could enlarge the space for it..

    Thread Starter Fabiola Ferreira

    (@fabiolabf)

    Hello Jarret..
    I’m still lost! It’s almost working, you alerady help very much! If you could just look again, please, I’ll apreciate!

    This is what I’m trying to do. keep all the information in just two lines..

    View post on imgur.com

    but it seems the space for the widgets (my theme has widgets on header) is just too small

    https://imgur.com/dfZh31A

    I would try this CSS

    .site-header .col-md-8 .widget {
        width: auto;
        padding: 0 10px 0 10px
    }
    
    .main-navigation .pull-right .fa {
        font-size: 22px;
        background-color: #EEE;
        padding: 10px;
        margin-left: -25px;
    }

    However, you also need to remove the following CSS that is setup somewhere within a Custom CSS area of the site

    
    .site-header .container .col-md-4 {
        max-width:40%;
    }
    .site-header .container .widget_custom_html {
        width: 5000px;
    }
    .div class col-md-8 text-right header-right-widget-area{
        width: 50000px;
    }
    Thread Starter Fabiola Ferreira

    (@fabiolabf)

    OMG, it works perfectly!
    Thank you, thank you, thank you!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Sticky Header’ is closed to new replies.