Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 20, 2013 at 10:44 am #163993
    disruptivevision

    Hi there,

    My site is disruptivevision.com and I need to reduce the height of the header. I’m using the Sticky header with social icons and additional navigation. I thought it would be fairly easy but i can’t figure out how to reduce it. I want the header to be just a little bit larger than the what it is when it’s reduced after scrolling.

    Could you help out with this?

    Thanks

    September 20, 2013 at 7:34 pm #164184
    Josue

    Hey disruptivevision!

    Your site is inaccessible but here’s the code you need to add to the css/custom.css file or to the Quick CSS section:

    #header_main .container, .main_menu div > ul > li > a{
height: 62px !important;
line-height: 62px !important;
}
.fixed_header.social_header #main{
padding-top: 93px;
}

    Cheers!
    Josue

    September 21, 2013 at 12:26 am #164296
    optizign13

    Hello, I used the code to adjust the ‘padding’ of the header, but it doesn’t make my menu height shorter.

    http://optizign.info/optizigntemp/
    password: hello12345

    September 21, 2013 at 12:42 am #164309
    Yigit

    Hello!

    Please add following code to Quick CSS and adjust as desired

    .fixed_header #main { padding-top: 66px; }

    By default it is 88px

    Regards,
    Yigit

    September 23, 2013 at 6:49 am #165064
    disruptivevision

    Hi Josue,

    Thanks for sending. I tried that code and it does the job but now when I scroll, the header doesn’t reduce and the logo doesn’t get smaller.

    What I am looking for is to reduce the height of the header when at the top of the page but still have it contract further when scrolling.

    Cheers

    September 24, 2013 at 4:10 am #165432
    Josue

    Hey!

    It doesn’t make smaller because it’s already small, however if you want to shrink it when scrolled you can use this code:

    .header-scrolled #header_main .container, .main_menu div > ul > li > a{
height: 50px !important;
line-height: 50px !important;
}

    Change the two ’50px’ for the desired height.

    Cheers!
    Josue

    September 25, 2013 at 11:54 am #166016
    disruptivevision

    Hi,

    The code given for header is working great thanks, how ever we are having the trouble with the logo size now.
    When we upload the logo in 343 width and 156 height it’s looking fine on the desktop but overlapping on the mobile. We uploaded a bunch of different sizes and found that 241 x 157 worked. The logo in the image is end to end horizontally but there is a lot of vertical space. This is ok but now the logo is too small, we tried increasing the width and expanding the logo in the image but that only seems to make the logo smaller.

    Please help out with this

    Cheers

    September 25, 2013 at 7:17 pm #166205
    Yigit

    Hello!

    Tried to login but its not working :)

    Best regards,
    Yigit

    September 26, 2013 at 4:09 am #166382
    disruptivevision

    Hi Yigit, give me your email ID, i’ll send you the login info. Have sent it to Josue already.

    Cheers

    September 26, 2013 at 12:32 pm #166580
    Yigit

    Hi!

    Please check your inbox

    Cheers!
    Yigit

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Change height of header’ is closed to new replies.