I have the following HTML/CSS producing <a href="http://dev.doig.com.au/" rel="nofollow noreferrer">the top navigation bar of a website</a>.
<a href="https://jsfiddle.net/xq8rgevo/6/" rel="nofollow noreferrer">JSFiddle here</a>.
However, the ul#main-menu will not float or align to the right. I can't see why this is the case.
I even tried
but I don't think this applies in flex models.
Help appreciated on how to shift the main menu over to the right of
Code:
#navbarNavDropdown {
align-content: flex-end;
}
#main-menu {
width: 700px;
float: right;
}
.navbar-nav {
display: flex;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.navbar-collapse {
display: flex !important;
width: 100%;
}
.navbar-nav {
flex-direction: row;
}
.menu-item {
float: left;
display: inline;
width: auto;
}
.navbar-nav .nav-link {
padding-right: .5rem;
padding-left: .5rem;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 10rem;
padding: 0.5rem 0;
margin: 0.125rem 0 0;
font-size: 1rem;
color: #292b2c;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
}
<div id="navbarNavDropdown" class="collapse navbar-collapse">
<ul id="main-menu" class="navbar-nav"><li class="menu-item menu-item-type-custom menu-item-object-custom nav-item menu-item-1636"><a title="Home" href="http://wpthemetestdata.wordpress.com/" class="nav-link">Home</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1637"><a title="Blog" href="http://dev.doig.com.au/blog/" class="nav-link">Blog</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1638"><a title="Front Page" href="http://dev.doig.com.au/front-page/" class="nav-link">Front Page</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children nav-item menu-item-1639 dropdown"><a title="About The Tests" href="#" data-toggle="dropdown" class="nav-link dropdown-toggle">About The Tests <span class="caret"></span></a>
<ul class=" dropdown-menu" role="menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1697"><a title="Page Image Alignment" href="http://dev.doig.com.au/about/page-image-alignment/" class="nav-link">Page Image Alignment</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1698"><a title="Page Markup And Formatting" href="http://dev.doig.com.au/about/page-markup-and-formatting/" class="nav-link">Page Markup And Formatting</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1640"><a title="Clearing Floats" href="http://dev.doig.com.au/about/clearing-floats/" class="nav-link">Clearing Floats</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1641"><a title="Page with comments" href="http://dev.doig.com.au/about/page-with-comments/" class="nav-link">Page with comments</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1642"><a title="Page with comments disabled" href="http://dev.doig.com.au/about/page-with-comments-disabled/" class="nav-link">Page with comments disabled</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children nav-item menu-item-1643 dropdown"><a title="Level 1" href="#" data-toggle="dropdown" class="nav-link dropdown-toggle">Level 1 <span class="caret"></span></a>
<ul class=" dropdown-menu" role="menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children nav-item menu-item-1644 dropdown-submenu"><a title="Level 2" href="http://dev.doig.com.au/level-1/level-2/" class="nav-link">Level 2</a>
<ul class=" dropdown-menu" role="menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1645"><a title="Level 3" href="http://dev.doig.com.au/level-1/level-2/level-3/" class="nav-link">Level 3</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1699"><a title="Level 3a" href="http://dev.doig.com.au/level-1/level-2/level-3a/" class="nav-link">Level 3a</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1700"><a title="Level 3b" href="http://dev.doig.com.au/level-1/level-2/level-3b/" class="nav-link">Level 3b</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1701"><a title="Level 2a" href="http://dev.doig.com.au/level-1/level-2a/" class="nav-link">Level 2a</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1702"><a title="Level 2b" href="http://dev.doig.com.au/level-1/level-2b/" class="nav-link">Level 2b</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1646"><a title="Lorem Ipsum" href="http://dev.doig.com.au/lorem-ipsum/" class="nav-link">Lorem Ipsum</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1703"><a title="Page A" href="http://dev.doig.com.au/page-a/" class="nav-link">Page A</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page nav-item menu-item-1704"><a title="Page B" href="http://dev.doig.com.au/page-b/" class="nav-link">Page B</a></li>
</ul></div><a href="https://jsfiddle.net/xq8rgevo/6/" rel="nofollow noreferrer">JSFiddle here</a>.
However, the ul#main-menu will not float or align to the right. I can't see why this is the case.
I even tried
Code:
#navbarNavDropdown {text-align: right;}Help appreciated on how to shift the main menu over to the right of
Code:
#navbarNavDropdown