Home / Forums / DynamiX Support / Mobile header elements alignment

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

  • JBF99
    Participant

    Hi,

    I’m having some trouble with alignment of the header elements for mobile.

    I’ve set the header for logo left and menu right. That works well on desktop, but for mobile, the menu button and logo are centered. That makes the header too tall for the small screen.

    I can’t get the menu or logo to move left or right, except, oddly, by setting both to ‘center.’ But that moves them both to center on the desktop view.

    Thanks.


    JBF99
    Participant
    This reply has been marked as private.

    Hi @jbf99

    I was able to login to the dashboard but clicking links on the dashboard or visiting the homepage triggers and error:;

    Not Found
    
    The requested URL /wp-admin/edit.php was not found on this server.

    Can you please look into this so we can check the issue with the mobile header?

    Regards,


    JBF99
    Participant

    It’s back up now

    Hi @jbf99

    Copy and paste this CSS into Theme Options > Customize > Mobile CSS

    .mobilemenu-init.skinset-main.nv-skin {
        float: right;
    }
    
    #primary-wrapper #header-logo {
        float: left;
    }

    This should make the logo float left and the mobile menu float right.

    Regards,


    JBF99
    Participant

    Thank you. That’s working beautifully on iPhone.

    On iPad and iPad mini, oddly, it’s working in landscape orientation, but not standard (vertical) orientation.

    With vertical orientation, it still bunches both in the center of the header. . .

    Hi @jbf99

    I checked and I do see the issue on ipad Mini with the screen site at 768px.

    Can you remove the CSS from mobile CSS then move it to the Custom CSS box with this new version?

    @media only screen and (min-width: 769px) {
    .mobilemenu-init.skinset-main.nv-skin {
        float: right;
    }
    
    #primary-wrapper #header-logo {
        float: left;
    }
    }

    Regards,


    JBF99
    Participant

    Thank you.

    I made those changes. Problem still there for iPad, now for iPhone also.

    Best,

    Hi @jbf99

    I did not see the CSS added on Theme options, so I added it with a minor tweak and the issue is now sorted out.

    Please check and confirm from your end.

    Regards,


    JBF99
    Participant

    Yes, it’s corrected now. Thank you.


    JBF99
    Participant

    Ah, except that I accidentally over-wrote your CSS by uploading a new version of the website.

    So I have yesterday’s CSS, but not your tweak.

    Could you drop it in here or at the site?

    Many thanks.

    Hi @jbf99

    The CSS should be

    @media only screen and (max-width: 769px) {
    .mobilemenu-init.skinset-main.nv-skin {
        float: right;
    }
    
    #primary-wrapper #header-logo {
        float: left;
    }
    }

    Regards,


    JBF99
    Participant

    It looks great – thank you.

    Best,

    You’re welcome, @jbf99

    Please don’t hesitate to contact us back if you encounter any issues.

    Regards.

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

You must be logged in to reply to this topic.