Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • August 6, 2017 at 1:52 am #834919
    ccyran

    Hey guys,

    Can you help me fix the header of my website on mobile? I want the width to be spaced correctly. So the my name/logo is closer to the left side, and the hamburger icon closer to the right.

    http://www.ccyran.com

    I put the custom CSS that I have on my site in the private content. I think the issue/fix could be there.

    Thanks!
    Chris

    August 7, 2017 at 5:17 am #835201
    Rikard

    Hey ccyran,

    Could you post screenshots of what you are looking to achieve please? You can upload to a service like google drive or dropbox and then link to them here.

    Best regards,
    Rikard

    August 7, 2017 at 5:58 am #835210
    ccyran

    Hey Rikard,

    Sure thing. Here’s a link: https://ibb.co/eh7dGa

    The header width currently looks too small. In my image on the right, thats how I want it to look.

    Thanks!

    August 9, 2017 at 11:45 pm #836689
    Nikko

    Hi Chris,

    Try adding this css code in Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:767px) {
  .responsive #top #wrap_all .container {
    width: 100%;
    max-width: 100%;
  }
}

    Let us know if this helps :)

    Best regards,
    Nikko

    August 10, 2017 at 5:25 am #836727
    ccyran

    That worked!

    Last request! Is there also CSS to center the header? Right now it’s not in the middle. When viewed on mobile

    Thanks :)

    • This reply was modified 7 years, 3 months ago by ccyran.
    August 10, 2017 at 6:44 am #836764
    John Torvik

    Hi,

    You can add this custom CSS code:

    
@media only screen and (max-width:767px) {
  .responsive .logo img {
    margin-left: 40% !important;
  }
}

    Best regards,
    John Torvik

    August 10, 2017 at 6:46 am #836766
    ccyran

    Hey John!

    Sorry I meant centered vertically!

    August 14, 2017 at 3:31 am #838412
    Nikko

    Hi Chris,

    Try adding this:

    @media only screen and (max-width:767px) {
  .responsive #top #wrap_all #header {
    padding-top: 0 !important;
  }
}

    Hope this helps :)

    Best regards,
    Nikko

    August 14, 2017 at 6:48 am #838456
    ccyran

    Perfect,

    thanks!

    August 14, 2017 at 11:54 am #838573
    Nikko

    Hi Chris,

    Glad we could help. Thanks for using Enfold :)

    Best regards,
    Nikko

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Header on mobile’ is closed to new replies.