Secondary menu when handheld

  • Hi, in the desktop website we have three items in the secondary menu as well as the primary navigation up in and around the header. One of the three links is for a Donate button. When handheld the secondary menu is not displayed. Is there a way to display the Donate button on a phone, perhaps right under the rectangle for Menu? This would place it next to the tagline. While I could add the link to the primary menu for handheld, it would be much better to be able to show the green button. If there is a better way to include it I am open to suggestions.

    Thank you

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Saif

    (@babylon1999)

    Hello @catwingz,

    I understand you want to keep the donate button on the mobile and tablet view.

    You can try the following CSS solution:

    /* For devices with a maximum width of 768px (tablets and mobiles) */
@media only screen and (max-width: 768px) {
  .secondary-navigation {
    display: block;
  }
  #menu-social-menu li:nth-child(1),
  #menu-social-menu li:nth-child(2) {
    display: none;
  }
}


    Link to image: https://d.pr/i/aeADsU

    I noticed that there might be a CSS conflict in the header of your website. This is most likely due to custom snippets you added. I suggest removing all the code snippets and then re-adding them one by one to determine which one is causing the issue.


    Link to image: https://d.pr/i/sYIUmp

    Cheers!

    Thread Starter catwingz

    (@catwingz)

    Thank you @babylon1999 , I haven’t tried it yet but the screenshot of the outcome of your CSS solution is better than I’d imagined possible.

    Regarding the CSS conflict, can you tell me what screen size/browser you’re seeing this occur? It will be a lot easier for me to solve it if I can recreate it. It’s not doing it on the devices I’ve tested so farand I had no idea there was a problem.

    Thanks again

    Saif

    (@babylon1999)

    Thank you @babylon1999 , I haven’t tried it yet but the screenshot of the outcome of your CSS solution is better than I’d imagined possible.

    Glad it helps! :?)

    Regarding the CSS conflict, can you tell me what screen size/browser you’re seeing this occur? It will be a lot easier for me to solve it if I can recreate it. It’s not doing it on the devices I’ve tested so farand I had no idea there was a problem.

    I am using a MacBook Air with a 2560 x 1600 resolution built-in display, but I can see the same issue even on my external monitor. Perhaps try zooming out in your browser.


    Link to image: https://d.pr/i/1tFn94

    Cheers!

    Thread Starter catwingz

    (@catwingz)

    @babylon1999 I am revisiting this because we’ve decided to simplify things and relocate the social icons, leaving only the Donate button in the banner. The problem is that removing the social icons has led to the recreation of the original problem of the Donate button being hidden when on a handheld device.

    I have tried both showing and hiding the

    #menu-social-menu li:nth-child(1),<br>#menu-social-menu li:nth-child(2) {<br>display: none;<br>}

    This experimentation is being done on a separate development site, not the public one.

    Any suggestions?

    Thread Starter catwingz

    (@catwingz)

    @babylon1999

    I have also tried this with no success:

    @media only screen and (max-width: 768px) {
    .secondary-navigation {
    display: block;
    }
    #menu-social-menu li/* :nth-child(1),
    #menu-social-menu li:nth-child(2) */{
    display: show;
    }
    }

    Since this is a continuation of an issue I am trying to revisit it instead of creating a new thread. However, I am beginning to think it’s not going to be seen.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Secondary menu when handheld’ is closed to new replies.