Tagged: , ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • January 28, 2014 at 1:37 pm #215756
    Munford

    Hi
    I am trying to get my logo/header looking right.
    added this:
    .logo img {
    padding: 30px 0 !important;
    }
    which looks good but I am using the fixed header and the logo disappears when it scrolls.
    also, now the logo is too small on mobile devices. I’d like the logo to be bigger on the mobile, but
    still have enough space for the slide out menu to be beside it on the top right. Before it was overlapping.

    help!
    and thanks

    January 28, 2014 at 3:32 pm #215809
    Yigit

    Hey Munford!

    Please add following code to Quick CSS as well

    .header-scrolled .logo img {
padding: 0 !important;
}

    If that does not fix it, please post the link to your website

    Best regards,
    Yigit

    January 28, 2014 at 7:41 pm #216003
    Munford

    Website is here:
    http://www.thisistouch.com/testing
    can’t tell if the logo is full size or not there, but the scrolling is better.
    Since I changed the padding on the logo, the logo on the mobile is a little small –
    want it still with the slide out menu next to it on the top.

    January 28, 2014 at 7:51 pm #216010
    Yigit

    Hey!

    You can add following code to Quick CSS as well to remove the padding on mobile

    @media only screen and (max-width: 480px) { 
.logo img {
padding: 0;
}}

    Cheers!
    Yigit

    January 28, 2014 at 10:10 pm #216063
    Munford

    that didn’t change the logo on the mobile – it’s just kind of small – like 50% of the width.
    I’d like it to be about 75% so the slide out menu can be in the upper right corner.
    thanks

    January 29, 2014 at 1:05 am #216149
    Ismael

    Hey!

    You can add this on Quick CSS to resize the logo then move the slideout menu:

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

.responsive .mobile_slide_out .logo img{ max-height: 95px !important; }
}

    Regards,
    Ismael

    January 29, 2014 at 9:29 am #216260
    Munford

    Hi again.
    That last code fixed the mobile menu issue, and it looks good on the web, but the logo is still too small on the mobile, with a little too much padding at the top. how do I adjust that? If I make the padding less that 50 px it disappears.

    • This reply was modified 10 years, 9 months ago by Munford.
    January 29, 2014 at 4:06 pm #216408
    Yigit

    Hey!

    Please add following code to Quick CSS

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

    With the fix i posted in your other thread, this should look fine as well

    Regards,
    Yigit

    January 29, 2014 at 4:14 pm #216425
    Munford

    will close this – on another thread now.

    • This reply was modified 10 years, 9 months ago by Munford.
  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘logo heading issues’ is closed to new replies.