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
    • Recruit

    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

  • Dustin
    • WPMU DEV Initiate

    I’m hosted at siteground..

    Like I said it was immediately broken on install. Please just help me sort it.

    Rather than trying to sort out someone elses code, I thought I just pop in ubermenu. But, then why did I come here in the first place.. Maybe I’m looking for fast and simple..

    It’s a Menu.. It’s been 6 days.. I paid for 24/7 support.

  • Michael Bissett
    • Recruit

    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.