Rearrange floating li elements in bootstrap navbar only on desktop

The floating li elements are correct in mobile and tablet view, but, in Desktop view, I would prefer the order to be:

The Gospel - More

CSS and HTML:

/* xs: Extra Small Devices, Phones */ @media (min-width: 480px) and (max-width: 767px) /* This code centers the top navbar items when it's collapsed. Whether they are stacked vertically or horizontally. Use for whenever the hamburger button appears. */ .navbar .navbar-nav display: inline-block; float: none; .navbar .navbar-collapse text-align: center; .navbar-brand font-size: 17px; .navbar-header position: relative; /* Adds light hover color with opacity to navbar menu items */ .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus background-color: rgba(241, 241, 241, 0.37); color: #999; .navbar-default .navbar-nav > .active > a background-color: rgba(231, 231, 231, 0.333); .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus background-color: rgba(231, 231, 231, 0.57); .topnav font-size: 17px; /*! This code makes the navbar work without javascript. */ #navbar-toggle-cbox:checked ~ .collapse display: block; #navbar-toggle-cbox display: none; .footer border-top: 1px solid #e7e7e7; .navbar background-image: url(navbar.png); .navbar-static-top border-bottom: 1px solid #e7e7e7; .navbar-collapse .collapse .center height: 50px; .nav > li.print-li display: table; @media (min-width: 768px) .navbar-nav > li margin-top: -1px; .navbar-nav > li.moveup-floatright float: right; margin-top: -48px; margin-left: auto; margin-right: auto; .navbar-nav > li.print-li margin-bottom: -2px; text-align: center; float: none; position: relative; margin-left: auto; margin-right: auto; .navbar-nav > li.more-li margin-right: -15px; .navbar-nav > li > a border-left: 1px solid #ececec; .navbar-nav > li.print-li > a display: inline-block; border-right: 1px solid #ececec; .navbar-nav > li.more-li > a border-right: 1px solid #ececec; #navbar > .topnav width: 100vw; margin-top: -49px; .center-brand-fix padding-left: 0; .topnav padding-left: 15px; padding-right: 15px; .navbar-header padding-left: 15px; /* This makes the navbar menu open by default and hides the hamburger icon */ .navbar-header > label display: none; @media (min-width: 1px) and (max-width: 767px) #top-cell > nav > .navbar > .container > #navbar display: inline-table; float: none; /* This code makes the footer have centered items. It does this because by calling all divs that must have both .navbar and .center, or by calling all divs with .navbar-inner. */ .navbar.center .navbar-inner text-align: center; .navbar.center .navbar-inner .nav float: none; display:inline-block; vertical-align: top; /* Custom: For iPhone retina */ @media (min-width: 320px) and (max-width: 479px) /* This code centers the top navbar items when it's collapsed. Whether they are stacked vertically or horizontally. Use for whenever the hamburger button appears. */ .navbar .navbar-nav display: inline-block; float: none; .navbar .navbar-collapse text-align: center; /* Custom: For smallest screen size */ @media (min-width: 1px) and (max-width: 316px) /* This code centers the top navbar items when it's collapsed. Whether they are stacked vertically or horizontally. Use for whenever the hamburger button appears. */ .navbar .navbar-nav display: inline-block; float: none; .navbar .navbar-collapse text-align: center; /* On small screen widths, the bullet verses are pushed too far to the right, it looks tacky and out of place. */ a.navbar-brand border-bottom: 1px solid #ccc; width: 255px; .nav > li.print-li display: block; .nav > li display: block; border-right: 1px solid #ececec; border-left: 1px solid #ececec; .navbar-collapse border-top: none; /* Center Brand */ @media (min-width: 1px) and (max-width: 767px) .navbar .navbar-brand, .navbar-collapse float: none; display: inline-block; *display: inline; /* ie7 fix */ *zoom: 1; /* hasLayout ie7 trigger */ vertical-align: top; .center-brand-fix text-align: center; margin-left: 0; @media (max-width: 979px) .navbar, .navbar-collapse display: block; /* Custom: TOP HEADER Navbar dropdown fix for phones */ @media (min-width: 317px) and (max-width: 767px) /* making float:left for .navbar-nav and .navbar-nav > li and adding a margin of 0 makes the header drop down menu not turn into a vertical stack */ .navbar-nav.topnav float: left; margin: 0; .navbar-nav.topnav > li float: left; .navbar-nav.topnav > li.more-li float: right; .navbar-nav.topnav > li.thegospel-li float: left; /* Adds border to navbar items */ .navbar-nav > li.print-li > a display: inline-block; border-right: 1px solid #ececec; .navbar-nav > li.more-li > a border-left: 1px solid #ececec; /* These two things prevent the navbar from bleeding extra space below */ #navbar max-height:50px; .navbar-collapse.in overflow-y: hidden; /* Deleting this code makes the navbar smaller but messes up the footer. Consider adding this only to navbar if you want or only footer. */ .navbar-nav > li > a padding-top: 15px; padding-bottom: 15px; } /* This makes the navbar menu CLOSED by default and hides the hamburger icon*/ @media (min-width: 1px) and (max-width: 354px) .collapse display: none; /* This makes the navbar menu open by default and hides the hamburger icon*/ @media (min-width: 355px) .navbar-header > label display: none; } #top-cell height: 51px; display: table-header-group; body, html height: 100%;

Here is a fiddle: https://jsfiddle.net/vf4z3qm0/8

Please use the fiddle, Stack Overflow's "Run Snippet" has a max-width too small to see desktop view.

1 Answer
1

Clear floated content within a div element with an id navbar the parent of li add .clearfix

<div id="navbar" class="navbar-collapse collapse center clearfix">

rearrange position of li elements make the .navbar-nav > li.moveup-floatright more-lion top ofthegospel-li`

.navbar-nav > li.moveup-floatright

on top of

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

搜尋此網誌

Dfyjkt