Alert box conflicts with cascading menu

Discussion in 'Wigwam' started by Jesse Garnier, Jul 21, 2017.

  1. Jesse Garnier

    Jesse Garnier New Member

    Joined:
    Jul 21, 2017
    Messages:
    2
    Likes Received:
    0
    I've run into what appears to be a conflict with placing an alert box on a page and using a menu with sub-menus on the same page.

    When my page does not include an alert box, the cascading sub-menus in my main navigation window work as expected.

    Example: http://stonehopper.com/bc2017/home-no-alert-box/

    But when my page has an alert box on it, the sub-menus are no longer accessible. Moving my mouse off the of the main menu item causes the sub-menu to disappear.

    Example: http://stonehopper.com/bc2017/

    I've tried this on Chrome, Firefox and Safari (Mac) all with the same result.

    Appreciate the assistance, I've enjoyed using and setting up this useful theme.

    Thank you!

    Cheers--

    --Jesse
     
  2. maimairel

    maimairel Administrator
    Staff Member

    Joined:
    Apr 16, 2014
    Messages:
    1,584
    Likes Received:
    58
    Hi Jesse,

    Thanks and I'm glad you enjoyed the theme :)

    That's indeed a very weird issue and I will check this out soon today. Will get back to you later today.

    Thanks!
     
    Jesse Garnier likes this.
  3. maimairel

    maimairel Administrator
    Staff Member

    Joined:
    Apr 16, 2014
    Messages:
    1,584
    Likes Received:
    58
    I was confused at first, but I found the problem.
    It's this custom CSS on your site that caused it:

    Code (CSS):

    .home .site-main {
        margin-top: -3em;
        margin-bottom: -3em;
    }
    This results in the site content covering the header, so when you go to a sub-menu it actually hovers out.
    It's not caused by the alert box, but the alert box is on your home page, so the CSS only gets applied on the home.
    If you move the alert box to the page without an alert box, then the problem will not be present.

    Thanks!
     
  4. maimairel

    maimairel Administrator
    Staff Member

    Joined:
    Apr 16, 2014
    Messages:
    1,584
    Likes Received:
    58
    If you want to reduce the top spacing then this is the CSS:

    Code (CSS):
    .site-main__content { padding-top: 0; }
    Thanks :)
     
    Jesse Garnier likes this.
  5. Jesse Garnier

    Jesse Garnier New Member

    Joined:
    Jul 21, 2017
    Messages:
    2
    Likes Received:
    0
    Thank you! I will make the adjustments and appreciate the outstanding support.
     

Share This Page