Aligning nav bar / shrinking dropdown menu box
Aligning nav bar / shrinking dropdown menu box
I've gotten the following code to look as I want it, except I need the last two nav bar items to align far right.
I can make that happen with ul text-align: right; width: 100%; background-color: #48C2C5;, but when I do that, it alters the size of my dropdown menus.
ul text-align: right; width: 100%; background-color: #48C2C5;
I've attached a few pictures along with the code.
I'm doing this in Springshare Libguides.
Nav bar without far right 2 aligned right:
Cut off dropdown menu:
<style>
.s-lib-box border-color: none; border-width: 0; box-shadow: none; background-color: none;
.s-lib-box .s-lib-box-title display: none;
.s-lib-box .s-lg-box-footer display: none;
body padding-left: 0; padding-right: 0;
#s-lib-public-main a color: #17365D;
#s-lib-public-main a:visited color: #2293c0;
/*ABC Header*/
#header-abc background-color: #ffffff; width: auto;
#banner-abc height: 110px; width: 1200px; margin-left: auto; margin-right: auto;
#logo-abc float: left; margin-left: 12px; margin-top: 10px;
#search-cat margin-top: 15px; padding: 0px 0px; text-align: right;
#translate padding: 2px 0px;
#google_translate_element width: 160px; margin: 15px 0;
/*Menu*/
.caretsolid #ffffff;
#menu-abc .navbar .nav > li > a, .navbar .nav > li > a:first-letter,
.navbar .nav > li.current-menu-item > a,
.navbar .nav > li.current-menu-ancestor > a
#menu-abc .navbar .nav > li > a, .navbar .nav > li > a:first-letter
color: white;
text-shadow: none;
#menu-abc .navbar .nav > li > a:hover, .navbar .nav > li > a:hover:first-letter
color:#006699;
text-shadow: none;
#menu-abc .navbar .nav > li > a:active, .navbar .nav > li > a:active:first-letter,
.navbar .nav > li.current-menu-item > a,
.navbar .nav > li.current-menu-ancestor > a,
.navbar .nav > li.current-menu-item > a:first-letter,
.navbar .nav > li.current-menu-ancestor > a:first-letter
color:#0099CC;
text-shadow: none;
#menu-abc .dropdown-menu > li > a
color: #48C2C5;
background: white;
.dropdown ul li
color:#0099CC;
#menu-abc .dropdown ul ul li a
font-size:14px;
color:#0099CC;
#menu-abc .navbar .nav > li.current-menu-item > a, .navbar .nav > li.current-menu-ancestor > a,
.navbar .nav > li > a:hover, .navbar .nav > li > a:focus
color: #red;
#menu-abc background-color: #48C2C5; border-bottom: none;box-shadow: 3px 3px 10px 1px #green;
#menu-abc .container-fluid padding: 20;
#menu-abc .navbar min-height: 15px; background-color: #48C2C5;
#menu-abc a padding-right: 0px; font-family: Perpetua; font-size: 18px; font-weight: bold;
#menu-abc a:hover color: #red;
.dropdown:hover .dropdown-menu font-size: 14px; display: inline;
.dropdown-menu > li > a
background: #48C2C5;
border-bottom: none;
#menu-abc background-color: #48C2C5; border-bottom: none;box-shadow: 3px 3px 10px 1px #white;
#menu-abc .container-fluid padding: 0;
#menu-abc .navbar min-height: 15px; background-color: #48C2C5;
#menu-abc a padding-right: 25px; font-family: Perpetua; font-size: 18px; font-weight: bold;
#menu-abc a:hover color: #red;
#menu-abc .dropdown:hover .dropdown-menu display: block;
.dropdown-content
min-width: 160px;
#menu-abc .navbar-default .navbar-collapse, #menu-abc .navbar-default .navbar-form background-color: #48C2C5;
#menu-abc .navbar-default width: auto; margin-left: auto; margin-right: auto; border: none;
#menu-abc .dropdown-menu a color:#0099CC;
#menu-abc .dropdown-menu a:hover background-color: #yellow;
#menu-abc .dropdown-menu .divider background-color: #48C2C5;
#menu-abc .navbar-default .navbar-nav > .open > a color: #48C2C5; background-color: #yellow;
#menu-abc .navbar-default .navbar-nav > li.open > a color: #yellow; background-color: #48C2C5;
#menu-abc .navbar-nav .dropdown:hover > a[data-toggle=dropdown] + .dropdown-menu display: block;
#menu-abc .navbar-nav .dropdown.open > a[data-toggle=dropdown] + .dropdown-menu display: block;
/*Main Content Area*/
#s-lib-public-main .row margin-bottom: 30px; margin-left: 5px;
<title></title>
</head>
<body class="s-lg-guide-body">
<!-- BEGIN: Page Header -->
<meta content="97a72cc605382e45-5c9ddd9618eb904f-gad80e90ba61d526a-e" name="google-translate-customization">
<div id="header-abc">
<div class="container-fluid" id="banner-abc">
<div class="row">
<div class="col-sm-6 center" id="col1">
<div class="row">
<div class="col-md-6" id="logo-abc">
<a href="http://a.m.state.sbu/sites/gis/ips/LIB/default.aspx"><img height="100" src="https://libapps.s3.amazonaws.com/accounts/27400/images/bunche_new_logo.jpg"></a>
</div><!--/logo-abc=-->
</div><!--/row-->
</div><!--/col1-->
<div class="col-sm-6" id="col0">
<div class="row">
<div class="col-md-7" id="search-cat">
<br>
</div><!--/row-->
</div><!--/col2-->
</div>
</div><!--/banner-abc-->
</div><!-- Menu -->
<div id="menu-abc">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button class="navbar-toggle" data-target="#abc-navbar-collapse-1" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
</div><!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="abc-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#">My Account</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Find<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#">Catalog</a>
</li>
<li>
<a href="#">Library Map</a>
</li>
<li class='sub'>
<a href="#">Databases</a>
<ul>
<li>
<a href="#">Current Trials</a>
</li>
</ul>
<ul>
<li>
<a href="#">Direct Access Resources</a>
</li>
</ul>
</li>
<li>
<a href="#">Find a Journal</a>
</li>
<li>
<a href="#">Ebooks</a>
</li>
<li>
<a href="#">Virtual Periodical Reading Room</a>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Get Help<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#">Research & Instruction Services</a>
</li>
<li>
<a href="#">Ebook Virtual Library</a>
</li>
<li>
<a href="#">Virtual Libraries</a>
</li>
<li>
<a href="#">A - Z Journal List</a>
</li>
<li>
<a href="#">Bibliographies</a>
<ul>
<li>
<a href="#">Foreign Affairs Professional Reading List</a>
</li>
</ul>
</li>
<li>
<a>Briefing Videos</a>
</li>
<li>
<a href="#">Copyright</a>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Library Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#">My Library Account</a>
<ul>
<li>
<a href="#">How to Create an Account</a>
</li>
</ul>
</li>
<li>
<a href="#">Acquisitions and Procurement</a>
<ul>
<li>
<a href="#">DS-2092</a>
</li>
</ul>
</li>
<li>
<a href="#">Interlibrary Loan</a>
</li>
<li>
<a href="#">Map Services</a>
</li>
<li>
<a href="#">Instruction</a>
</li>
<li>
<a href="#">Donations</a>
</li>
<li>
<a href="#">Booking the Rare Book Room</a>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">About Us<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#">Mission and Vision</a>
</li>
<li>
<a href="#">Library Staff</a>
</li>
<li>
<a href="#">Policies</a>
<ul>
<li>
<a href="#">Circulation</a>
</li>
</ul>
<ul>
<li>
<a href="#">Collection Development</a>
</li>
</ul>
</li>
<li>
<a href="#">Who was Ralph Bunche?</a>
</li>
<li>
<a href="#">Rare Book Collection</a>
</li>
<li>
<a href="#">5 FAM 1400</a>
</li>
<li class="divider"></li>
<li>
<a href="#">Office of Information Programs and Services</a>
</li>
</ul>
</li>
<li style="float:right;">
<a href="#</a>
</li>
<li style="float:right;">
<a href="#">A/GIS/IPS</a>
</li>
</ul><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
</nav>
</div><!-- END: Page Header Without Encore -->
<!-- END: Page Header -->
</div>
</body>
</html>
2 Answers
2
I know LibGuides use Bootstrap 3, so instead of the float right on the last two list items, I've placed a pull-right class. I also set the UL element to stretch to 100%. The answer below only includes the HTML, not the CSS, but give it a try:
<div id="header-abc">
<div class="container-fluid" id="banner-abc">
<div class="row">
<div class="col-sm-6 center" id="col1">
<div class="row">
<div class="col-md-6" id="logo-abc">
<a href="http://a.m.state.sbu/sites/gis/ips/LIB/default.aspx"><img height="100" src="https://libapps.s3.amazonaws.com/accounts/27400/images/bunche_new_logo.jpg"></a>
</div><!--/logo-abc=-->
</div><!--/row-->
</div><!--/col1-->
<div class="col-sm-6" id="col0">
<div class="row">
<div class="col-md-7" id="search-cat">
<br>
</div><!--/row-->
</div><!--/col2-->
</div>
</div><!--/banner-abc-->
</div><!-- Menu -->
<div id="menu-abc">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button class="navbar-toggle" data-target="#abc-navbar-collapse-1" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
</div><!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="abc-navbar-collapse-1">
<ul class="nav navbar-nav" style="width:100%;">
<li>
<a href="#">My Account</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Find<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#">Catalog</a>
</li>
<li>
<a href="#">Library Map</a>
</li>
<li class='sub'>
<a href="#">Databases</a>
<ul>
<li>
<a href="#">Current Trials</a>
</li>
</ul>
<ul>
<li>
<a href="#">Direct Access Resources</a>
</li>
</ul>
</li>
<li>
<a href="#">Find a Journal</a>
</li>
<li>
<a href="#">Ebooks</a>
</li>
<li>
<a href="#">Virtual Periodical Reading Room</a>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Get Help<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#">Research & Instruction Services</a>
</li>
<li>
<a href="#">Ebook Virtual Library</a>
</li>
<li>
<a href="#">Virtual Libraries</a>
</li>
<li>
<a href="#">A - Z Journal List</a>
</li>
<li>
<a href="#">Bibliographies</a>
<ul>
<li>
<a href="#">Foreign Affairs Professional Reading List</a>
</li>
</ul>
</li>
<li>
<a>Briefing Videos</a>
</li>
<li>
<a href="#">Copyright</a>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Library Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#">My Library Account</a>
<ul>
<li>
<a href="#">How to Create an Account</a>
</li>
</ul>
</li>
<li>
<a href="#">Acquisitions and Procurement</a>
<ul>
<li>
<a href="#">DS-2092</a>
</li>
</ul>
</li>
<li>
<a href="#">Interlibrary Loan</a>
</li>
<li>
<a href="#">Map Services</a>
</li>
<li>
<a href="#">Instruction</a>
</li>
<li>
<a href="#">Donations</a>
</li>
<li>
<a href="#">Booking the Rare Book Room</a>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">About Us<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#">Mission and Vision</a>
</li>
<li>
<a href="#">Library Staff</a>
</li>
<li>
<a href="#">Policies</a>
<ul>
<li>
<a href="#">Circulation</a>
</li>
</ul>
<ul>
<li>
<a href="#">Collection Development</a>
</li>
</ul>
</li>
<li>
<a href="#">Who was Ralph Bunche?</a>
</li>
<li>
<a href="#">Rare Book Collection</a>
</li>
<li>
<a href="#">5 FAM 1400</a>
</li>
<li class="divider"></li>
<li>
<a href="#">Office of Information Programs and Services</a>
</li>
</ul>
</li>
<li class="pull-right">
<a href="#">Knowledge Portal</a>
</li>
<li class="pull-right">
<a href="#">A/GIS/IPS</a>
</li>
</ul><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
</nav>
</div><!-- END: Page Header Without Encore -->
<!-- END: Page Header -->
</div>
You problem is with this css code:
ul text-align: right; width: 100%; background-color: #48C2C5;
It will affected all the same element or recursively to all it's child element.
To solved this you can add additional id or class on the affected element to make it unique:
ul.unique text-align: right; width: 100%; background-color: #48C2C5;
or overwrite style on unwanted affected element only:
ul li.sub-menu text-align: left;
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Beautiful! This worked perfectly - thank you!!
– bbbender
Aug 22 at 12:27