Oslo Navigation Dropdown Issues

Question

we are running into an issue with the Oslo layout when we try and use a drop down navigation header and it gets stacked on top of another. The issue is that before the mouse picks up the drop down menu it registers the header below that and thus makes it impossible to click on any drop down items from the original menu. Is there a way to expand the area between two drop down headers so that I can get to the original or is this just a known issue with no fix? Here is a screenshot of the navigation bar.

Answer 1

1. If you go to site settings > Look and Feel > Master Page

2. Click on Alternate CSS URL

3. Click on Browse

4. Click on Add a new item at the top of the window

5. Select your custom CSS file (I will paste mine below)

6. Once uploaded navigate to the new file, select it and click insert.

7. Click OK on the Master Page settings page.

If you do not select to use the same master pages and setup from top site navigation you will also have to go enable Site Publishing under Site Features for your subsites.

Here is the CSS I used to get some spacing and extra features in my navigation .(Oslo)

/*** Top Navigaion Menu Items container DIV ***/
.ms-core-listMenu-horizontalBox {
    background-color: transparent;
} 

 /*** Top Navigaion Static Menu Items ***/
.ms-core-listMenu-horizontalBox li.static {
    border: 1px solid transparent;

}

 /*** Top Navigaion Static Menu Item Links  ***/
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item {
    color: #21374C;
    white-space: nowrap;
    border: 1px solid transparent;
    padding: 5px;
    padding-bottom: 20px;
    padding-left: 5px;
    margin-right: 5px;
} 

  /* Top Navigation static Menu Item Links Hover Style  */
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item:hover {
    background: url("/_layouts/Images/selbg.png") repeat-x left top;
    background-color: transparent;
    color: #fff;
    text-decoration: none;
}

 /*** Top Navigaion Static Menu Selected ***/
.ms-core-listMenu-horizontalBox li.selected a.selected {
     /* Glass Effect Shade Image */
 /* Glass Effect Shade Image */
    background-color: #fff;
    color: #fff;
    text-decoration: none;
    border: 1px #134072 solid;
    padding: 20px 20px;
    margin: 20px;
} 


/***  Sub-Menu Items (HyperLinks) Style ***/
ul.dynamic .ms-core-listMenu-item {
    background-color: transparent;
    padding: 5px 0px 5px 0px;
    white-space: pre-line;
} 


/*** Sub-Menu Items (HyperLinks) Hover Style ***/
ul.dynamic .ms-core-listMenu-item:hover {
    background-color: #fff;
    color: #FFF;
} 

 /** Hide "Edit Links" ***/
.ms-listMenu-editLink {
    display: none !important;
}