My main header menu CSS was broken on install

My main header menu CSS was broken on install. You can see here http://prairiemark.com/services/

  • Michael Bissett

    Hey @Dustin, my apologies for the delay here!

    I've been unable to replicate this over on my own test site, even with clearing the layout settings, so I'm more than a bit curious as to why it's acting like this on yours.

    I noticed that the Support Access you've granted here has expired, could you please re-grant it, so that I can have a closer look at things?

    Thanks again! :slight_smile:

    Kind Regards,
    Michael

  • Michael Bissett

    Hey @Dustin, Michael here!

    The behavior on your new site is a bit different from what I saw on the first one, but that particular styling issue is something already being looked into by our developers.

    As a workaround in the meantime though, you'll want to change the CSS rules for the "Default" Element style to these:

    .upfront-navigation ul.menu, .upfront-navigation ul.sub-menu {
        background-color: transparent;
    }
    .upfront-navigation ul.menu > li.new_menu_item a.menu_item {
        color: inherit;
        font-family: 'Raleway', Arial, sans-serif;
        font-style: normal;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.308em;
        padding: 0 0 5px;
        text-transform: uppercase;
    }
     div[data-style='horizontal'] ul > li.menu-item > a,  div[data-style='vertical'] ul > li.menu-item > a {
        color: #ufc1;
        font-family: 'Raleway', Arial, sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 13px;
        line-height: 1.308em;
        padding: 0 0 5px;
        position: relative;
        text-transform: uppercase;
    }
     div[data-style='horizontal'] ul > li.menu-item > a:hover,  div[data-style='vertical'] ul > li.menu-item > a:hover {
        color: #ufc3;
    }
     div[data-style='horizontal'][data-aliment='right'] ul.sub-menu > li.menu-item > a,  div[data-style='vertical'][data-aliment='right'] ul > li.menu-item > a {
        padding-right: 25px
    }
     div[data-style="horizontal"] ul.sub-menu,  div[data-style="vertical"] ul.sub-menu {
        background-color: #f5f5f5;
    }
     div[data-style="horizontal"] ul.sub-menu ul.sub-menu,  div[data-style="vertical"] ul.sub-menu ul.sub-menu {
        padding-top: 0;
    }
     div[data-style="horizontal"] ul.sub-menu > li.menu-item,  div[data-style="vertical"] ul.sub-menu > li.menu-item {
        display: block;
        min-width: 160px;
    }
    div.upfront-navigation div[data-style="horizontal"] ul.sub-menu > li.menu-item > a, div.upfront-navigation div[data-style="vertical"] ul.sub-menu > li.menu-item > a {
        border-left-color: #ddd;
        padding: 10px;
    }
    div.upfront-navigation div[data-style="horizontal"][data-aliment='right'] ul.sub-menu > li.menu-item.parent > a, div.upfront-navigation div[data-style="vertical"][data-aliment='right'] ul.sub-menu > li.menu-item.parent > a, div.upfront-navigation div[data-style="horizontal"][data-aliment='right'] ul.sub-menu > li.menu-item.menu-item-has-children > a, div.upfront-navigation div[data-style="vertical"][data-aliment='right'] ul.sub-menu > li.menu-item.menu-item-has-children > a {
        padding-right: 25px;
    }
    div.upfront-navigation div[data-style="horizontal"] ul.sub-menu:first-child > li.menu-item > a, div.upfront-navigation div[data-style="vertical"] ul.sub-menu:first-child > li.menu-item > a {
        border-left-color: transparent;
    }
     div[data-style='horizontal'] ul.sub-menu li.menu-item-has-children > a:after,  div[data-style='horizontal'] ul.sub-menu li.parent > a:after,  div[data-style='vertical'] ul li.menu-item-has-children > a:after,  div[data-style='vertical'] ul li.parent > a:after {
        border-top-color: #ufc1;
        top: 7px;
        right: 10px;
    }
     div[data-style='horizontal'] ul.sub-menu li.menu-item-has-children:hover > a:after,  div[data-style='horizontal'] ul.sub-menu li.parent:hover > a:after,  div[data-style='vertical'] ul li.menu-item-has-children:hover > a:after,  div[data-style='vertical'] ul li.parent:hover > a:after {
        border-top-color: transparent;
        border-left-color: #ufc3;
        top: 5px;
    }
     div[data-style='horizontal'] ul.sub-menu li.menu-item-has-children > a:after,  div[data-style='horizontal'] ul.sub-menu li.parent > a:after,  div[data-style='vertical'] ul.sub-menu li.menu-item-has-children > a:after,  div[data-style='vertical'] ul.sub-menu li.parent > a:after {
        top: 17px;
    }
     div[data-style='horizontal'] ul.sub-menu li.menu-item-has-children:hover > a:after,  div[data-style='horizontal'] ul.sub-menu li.parent:hover > a:after,  div[data-style='vertical'] ul.sub-menu li.menu-item-has-children:hover > a:after,  div[data-style='vertical'] ul.sub-menu li.parent:hover > a:after {
        top: 15px;
    }
     div[data-style='horizontal'] ul.sub-menu li.menu-item-depth-4 ul.sub-menu,  div[data-style='vertical'] ul.sub-menu li.menu-item-depth-4 ul.sub-menu {
        left: 0;
        position: relative;
    }
     div[data-style='horizontal'] ul.sub-menu li.menu-item-depth-4 ul.sub-menu li.menu-item > a,  div[data-style='vertical'] ul.sub-menu li.menu-item-depth-4 ul.sub-menu li.menu-item > a {
        border-left: none;
        border-top: 1px solid #ddd;
    }
     div[data-style='horizontal'] ul.menu > li.menu-item {
        margin-left: 30px;
    }
     div[data-style='horizontal'] ul.menu > li.menu-item:first-child {
        margin-left: 0;
    }
     div[data-style='horizontal'] ul.menu > li.menu-item > a:after {
        background-color: transparent;
        border: none;
        bottom: 0;
        content: "";
        display: block;
        left: 0;
        height: 2px;
        margin: auto;
        position: absolute;
        right: 0;
        -moz-transition: background-color .4s ease;
        -ms-transition: background-color .4s ease;
        -webkit-transition: background-color .4s ease;
        transition: background-color .4s ease;
        top: inherit;
        width: 100%;
    }
     div[data-style='horizontal'] ul.menu > li.current-menu-item > a:after,  div[data-style='horizontal'] ul.menu > li.menu-item > a:hover:after {
        background-color: #ufc1;
    }
     div[data-style='vertical'] ul li.menu-item > a {
        padding: 0;
    }
     div[data-style='vertical'] ul.menu li.menu-item {
        margin-top: 15px;
    }
     div[data-style='vertical'] ul.menu li.menu-item:first-child {
        margin-top: 0;
    }
     div[data-style='vertical'] ul.sub-menu li.menu-item {
        margin-top: 0;
    }
    div.upfront-navigation div[data-style="vertical"] ul.menu ul.sub-menu {
        top: -7px;
    }
    div.upfront-navigation div[data-style='vertical'] ul.menu ul.sub-menu ul.sub-menu {
        top: 0;
    }
    div[data-style='burger'] ul.menu {
        background: #ffffff;
    }
    div.responsive_nav_toggler {
        width: 30px;
        height: 30px;
        padding-top: 10px;
        border: 0;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        background: #000000;
    }
    div.responsive_nav_toggler > div {
        width: 16px;
        height: 2px;
        margin-bottom: 2px;
        background: #ffffff;
    }
    div.responsive_nav_toggler > div:last-child {
        margin-bottom: 0;
    }
    i.burger_nav_close {
        margin: 20px;
        background: #000000;
        color: #ffffff;
    }
    div[data-style='burger'] ul.menu > li.menu-item > a {
        color: #333333;
        font-size: 13px;
        font-family: "Raleway";
        font-weight: bold;
        text-transform: uppercase;
    }
    div[data-style='burger'] ul.sub-menu > li.menu-item:hover > a {
        color: #000000;
    }
    
    div.burger_overlay {
      background-color:rgba(255, 255, 255, 0.7);
    }
    
    i.burger_nav_close:before {
        position: relative;
        top:-1px;
    }
    
    i.burger_nav_close, div.responsive_nav_toggler {
        background:#333;
    }

    Once you do that, you should see your menu looking as it should now. :slight_smile:

    If you're still running into issues though, could you please revoke & re-grant Support Access to your site? It's being stubborn now, keeps on giving me an "invalid access token" error every time I try to log in.

    Please advise,
    Michael

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.