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.

enter image description here

  • 1
    You can alter the spacing between the lines with CSS, but if you want a code example it will be helpful if you can use the developertools in your browser and inspect one of the elements. Post the html code for the navigation here and I´ll write you the css code.
    – Andreas
    Commented Jan 2, 2016 at 21:50
  • Which element am I inspecting? Commented Jan 4, 2016 at 19:27
  • @Andreas, do you mean the navigation element? Commented Jan 4, 2016 at 20:30
  • Hi. Select one of the top elements of your navigation. For example escp. Then copy the html code inn here.
    – Andreas
    Commented Jan 5, 2016 at 5:19
  • I actually got it to work, just wrote a css file and uploaded it under master pages. Commented Jan 5, 2016 at 13:20

1 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;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.