Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #419948

    Hello I am seeking for a css code to change the height of header when responsive.

    I am using the latest Enfold.

    Thanks!

    #420435

    Hi szzyp!

    Could you provide us with a link to the site in question so that we can take a closer look please? Also, a description of how you want it to look and/or screenshots or a mockup. If you want to have a go yourself you can use the following CSS media queries:

    /* Smaller than standard 960 (devices and browsers) */
    @media only screen and (max-width: 959px) {}
     
    /* Tablet Portrait size to standard 960 (devices and browsers) */
    @media only screen and (min-width: 768px) and (max-width: 959px) {}
    
    /* All Mobile Sizes (devices and browser) */
    @media only screen and (max-width: 767px) {}
    
    /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
    @media only screen and (min-width: 480px) and (max-width: 767px) {}
     
    /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
    @media only screen and (max-width: 479px) {}

    Regards,
    Rikard

    #420439
    This reply has been marked as private.
    #420963

    Hi!

    Great, thanks for the link. Could you please provide us with screenshots highlighting how you want it to look instead? It’s difficult for us to help you unless you are as specific as possible.

    Cheers!
    Rikard

    #421715
    This reply has been marked as private.
    #421719
    This reply has been marked as private.
    #422258

    Hey!

    Looks like logging in is required to view the page, could you please provide us with a temporary admin login so that we can take a closer look? You can post the details here as a private reply.

    Best regards,
    Rikard

    #422281
    This reply has been marked as private.
    #422329

    When you finished admin use please let me know Thanks!

    #422594

    Hey!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    #advanced_menu_toggle { right: 5%; color: white; }
    #advanced_menu_toggle:after {
      content: 'Menu';
      font-size: 18px;
      position: relative;
      top: -4px;
      left: 5px;
      color: white;
    }

    Regards,
    Yigit

    #422883

    I have applied the code but the height problem is still exist…

    #422886

    so let’s just focus on this question – how could I make the header FIXED 50px under any condition… especially when responsive?

    #423025

    Hey!

    I added following code to Quick CSS

    @media only screen and (max-width: 767px) {
    #header_main .container {
      max-height: 50px;
    }
    #header_main {
      height: 50px;
    }
    .responsive .logo img {
      max-height: 50px;
    }
    .responsive .logo a { vertical-align: top; }}

    Please review your website now

    Regards,
    Yigit

    #423295

    Thanks! Please consider this as resolved!

    #423388

    Hey!

    Great, glad we could help :)

    Regards,
    Rikard

Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Change Header Height when Responsive’ is closed to new replies.