Home / Forums / You Theme Support / Moving or Re-Sizing Logo for Mobile

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts

  • mothlights2015
    Participant

    Hi there,

    Love the theme, I’ve almost finished my site however whilst going through all the responsive platforms namely iPhone sized screens, I’ve noticed that the logo from the dock bar covers up some of the headers. (See linked image).

    https://s8.postimg.org/7phncpgxh/Screen_Shot_2017-05-02_at_15.32.50.png>

    I’ve had a play with custom mobile CSS in the theme options but I can’t seem to work out what I need to do to either move up or re-size the logo to fit with the header content.

    Thanks in advance.

    Dan

    Hi @mothlights2015

    Can you please send over your site’s URL and login credentials so we can personally check on this on our end?

    Regards,


    mothlights2015
    Participant
    This reply has been marked as private.

    Hi @mothlights2015

    The login you sent is not working. It’s not taking either the username/password. Can you please check?

    Regards,


    mothlights2015
    Participant
    This reply has been marked as private.

    Hi @mothlights2015

    I checked your site on iPhone mobile and I do not see the issue. See the screenshot here: http://i65.tinypic.com/25svmkg.jpg

    Can you clear your browser’s cache and check again?

    Regards,


    mothlights2015
    Participant
    This reply has been marked as private.

    Hi @mothlights2015

    Add this CSS into Theme Options > Custom CSS > Mobile CSS. This should fix the overlap of the logo and content on each of the pages you mentioned

    .page-id-5399 .header-float-wrap.header_float.transparent, .page-id-4763 .header-float-wrap.header_float.transparent, .page-id-5335 .header-float-wrap.header_float.transparent{
    position: relative;
    }

    Regards,


    mothlights2015
    Participant

    That’s great – thanks for you help, I wonder if you are able to help me reduce the padding around the logo a little more?

    As you can see from the screenshot there is a lot of dead space above the logo before the menu and a tad too much below it before the header.

    Any ideas?

    Thanks,

    Dan

    Hi @mothlights2015

    I added this CSS and the logo should now look “tighter” with lesser margin.

    div#header-logo {
        margin: 5px 0 10px 0;
    }

    Can you please check if everything looks good from your end?


    mothlights2015
    Participant

    Thanks for your help so far! That seems to have worked great and fixed the other pages with the static headers, however the home page with the slider seems to have taken a large spacing.

    It looks like it might need different css instruction than the static pages perhaps? Do you have any ideas?

    Attached screenshot of index page.

    Best,

    Dan

    Hi @mothlights2015

    You actually added a 100px margin to this row causing the big space.

    I added a class name to the row and countered the 100px margin you set with this CSS for mobile

    .vc_row.wpb_row.row.vc_row-parent.homepage-first-slider {
        margin-top: 5px !important;
    }

    It should now be fixed. Please check and confirm from your end.

    Regards,

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.