Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • October 26, 2014 at 11:42 pm #341178
    Munford

    Hi Kriesi
    I just updated the site below to Enfold 3.0
    All looks great except some styling issues on the nobile header/logo.
    I had this styling on the old quick css:

    @media only screen and (max-width: 767px) {
    .mobile_active #advanced_menu_toggle {
    display: block;
    right: -15px;
    top: 20px; }
    .logo img {
    margin-top: 0!important;
    padding-top: 0;
    }
    .responsive .logo { margin-left: -10px!important;}
    }
    .responsive .mobile_slide_out .logo img{ max-height: 120px !important; }

    I forget now what those codes are doing. Just want the logo to be a bit larger and stretch across to the menu box.

    There is also a narrow empty gray area above the header on the mobile – I’d like to get rid of that but not sure where it’s coming from. ?

    thanks for your help
    Nancy

    • This topic was modified 10 years ago by Munford.
    October 27, 2014 at 6:59 pm #341677
    Yigit

    Hi Munford!

    Please add following code to Quick CSS

    #header_meta { display: none; }
@media only screen and (max-width: 767px) {
.responsive .logo img, .logo a, .logo { width: 105%; }}

    Best regards,
    Yigit

    • This reply was modified 10 years ago by Yigit.
    October 27, 2014 at 10:08 pm #341814
    Munford

    thanks – that got rid of the gray area and the logo is bigger, but seems to be getting cut off (http://imgur.com/DCW3TWM – there is a little “TM” that is getting cut) by some padding around the menu block that didn’t used to be there. I have tried to move the menu to the right more but it doesn’t seem to be moving.
    ?
    thanks for your help
    Nancy

    October 27, 2014 at 11:03 pm #341843
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 767px) {
.responsive .logo { width: 90%; }}

    I also edited the code i posted in my previous post, please replace it with the new on in your Quick CSS field

    Best regards,
    Yigit

    October 28, 2014 at 12:07 am #341863
    Munford

    Thanks Yigit – that worked better.
    Is is also possible to move the menu block to the right? I have tried playing around with the with the right margin here:

    @media only screen and (max-width: 767px) {
    .mobile_active #advanced_menu_toggle {
    display: block;
    right: -15px;
    top: 20px; }

    but it didn’t move.

    October 28, 2014 at 12:15 am #341869
    Yigit

    Hey!

    Please try adding !important rule as following 

    #advanced_menu_toggle {
right: -20px!important;
}

    and make sure to disable CSS minifying feature if you are using and flush browser cache.
    P.S.: Media queries should be closed with additional curly bracket as following

    @media only screen and (max-width: 767px) {
.mobile_active #advanced_menu_toggle {
display: block;
right: -15px;
top: 20px; }
}

    If you have any missing curly bracket in your custom CSS code that might be causing issue as well

    Cheers!
    Yigit

    October 28, 2014 at 12:16 am #341870
    Munford

    OK here is what I have:
    @media only screen and (max-width: 767px) {
    .mobile_active #advanced_menu_toggle {
    display: block;
    right: -20px!important;
    top: 40px; }
    .logo img {
    margin-top: 5px!important;
    padding-top: 0;}
    .responsive .logo { margin-left: -10px!important; }
    }

    #header_meta { display: none; }
    @media only screen and (max-width: 767px) {
    .responsive .logo img, .logo a, .logo { width: 105%; }}

    @media only screen and (max-width: 767px) {
    .responsive .logo { width: 90%; }}

    which seems to work now. The menu doesn’t seem to want to move further to the right – is that a set with the content width?
    It’s OK like it is though…thanks so much for your help.
    /Nancy

    • This reply was modified 10 years ago by Munford.
    October 28, 2014 at 12:28 am #341885
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    .html_header_top.html_header_topbar_active.html_header_sticky.html_large #top #main {
padding-top: 117px;
}

    Regards,
    Yigit

    October 28, 2014 at 12:39 am #341897
    Munford

    I don’t understand what that code is for – is that in response to my (deleted) question about the double border I was seeing?
    I set the secondary header to “none” and that fixed it.
    Or was that for something else?

    • This reply was modified 10 years ago by Munford.
    October 28, 2014 at 12:41 am #341900
    Yigit

    Hey!

    It was for double border, glad you figured it out :)

    Best regards,
    Yigit

    October 28, 2014 at 12:50 am #341912
    Munford

    I see you closed the other thread #339999 just now regarding this page:

    – I edited my response there =
    need to increase the logo size a bit…can you take a look?

    • This reply was modified 8 years, 7 months ago by Yigit.
    October 28, 2014 at 12:52 am #341913
    Munford

    also, while I have your attention,
    this…#341446

    thanks you are the best!

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘logo mobile styling’ is closed to new replies.