Support » Theme: Udyama » Sticky Header

  • 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)
  • Jarret

    (@jarretc)

    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%;   
    }

    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!

    Jarret

    (@jarretc)

    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

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

    Jarret

    (@jarretc)

    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;
    }

    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..

    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..
    https://imgur.com/Xq2xrzu

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

    https://imgur.com/dfZh31A

    Jarret

    (@jarretc)

    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;
    }

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.