Navigation bar covers header button in mobile

Support Area Forums Forward Navigation bar covers header button in mobile

Viewing 2 posts - 1 through 2 (of 2 total)
URL to the page in question: http://helpthiskid.org
  • Author
    Posts
  • #38197
    Avatar photoallison
    Participant

    Hi Bill:

    I resolved the other issue. Thanks again.

    In mobile the custom button in my header is covered by the navigation bar. And the navigation bar isn’t the same color as my desktop site. I’ve tried to resolve this using some old support string custom css, but it hasn’t worked. Also the header text gets cut off in mobile.

    Maybe the answer is to hide the button in mobile? Or is there an easier solution?

    Best,

    Allison

    #38200
    Bill Robbins
    Moderator

    Glad that did the trick on your other situation. If I could offer a couple of things here. For the snippet that goes with your header button:

    
    #header-button {
         position: absolute;
         top: 15px;
         right: 30px;
    

    It looks like it’s missing the closing bracket on that style. I would replace it with this instead:

    
    #header-button {
         float: right;
    }
    
    @media only screen and (max-width: 767px) {
    
      #header-button {
        float: none;
        display: block;
        text-align: center;
      }
    
    }
    

    That should right align the button on larger screens and center it without it overlapping on smaller ones.


    I recently replace the original navigation menu in the theme with a different one. It looks like that change is preventing the custom navigation bar color from picking up. Add this to your Custom CSS too:

    
    select.tinynav { background-color: #ff5c3f; }
    

    I’ll make a change in the theme to correct that in the next update.

    Hope that helps out,
    Bill

Viewing 2 posts - 1 through 2 (of 2 total)
  • The topic ‘Navigation bar covers header button in mobile’ is closed to new replies.