Navigation
Archive / my purchase button in the navbar needs some margin-top on mobile screen only
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • June 8, 2016 at 1:10 pm #1032390
    bperry420
    Participant

    Is there a way to give my navbar purchase button some more margin above it when viewed on a mobile screen?
    It is perfect on a large screen but needs some room up top on a mobile screen.
    Please see attached screenshot.

    URL: dev2.petpace.com

    Stack: Renew
    WordPress 4.5.2 running X – Child Theme
    X Version: 4.4.2
    Cornerstone Version 1.2.4

    June 8, 2016 at 6:30 pm #1032806
    Jade
    Moderator

    Hi there,

    Please add this in the customizer:

    @media (max-width: 980px) {
    #nav-purchase-button {
        margin-top: 0;
    }

    .x-navbar .x-nav>li>a>span {
        display: block;
    }
}

    Hope this helps.

    June 9, 2016 at 9:29 am #1034070
    bperry420
    Participant

    Hello,

    That helped the top spacing issue, but now when you hover over the button or select it, the button jumps up and then stays too far up once selected.

    see screenshot…

    June 9, 2016 at 12:05 pm #1034335
    Joao
    Moderator

    Hi There

    Please try adding this code :

    
@media (max-width: 980px) {
    #nav-purchase-button:hover {
        margin-top: 0;
    }

    Let us know how it goes.

    Thanks

    Joao

    June 9, 2016 at 9:18 pm #1035149
    bperry420
    Participant

    That was the trick! Thank you so much!

    June 9, 2016 at 10:34 pm #1035218
    Prasant Rai
    Moderator

    You are most welcome. 🙂

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1032390 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>