On this page there's a menu in the right sidebar that is composed of a HTML list with this structure:
<ul class="nav nav-pills nav-stacked">
<li class="active">
<i class="icon-home"></i> Home
</li>
<li>
Development
</li>
<li>
Management
</li>
<li>
Learning
</li>
<!-- more menu entries -->
</ul>
Notice that some menu entries have (font) icons to the left of the label, whereas others don't. This makes the menu appear rather unsightly, because the labels are not vertically aligned.
Is there are any way to vertically align the labels, ideally without introducing additional HTML elements (because that messes up some immediate descendant rules that are defined within Bootstrap itself)?
Try this:
.nav-pills.nav-stacked > li > a {
padding-left: 25px;
}
.nav-pills.nav-stacked > li > a > i {
position: absolute;
margin-left: -25px;
}
It takes the icons out of the flow, puts the text 25px to the right, and then positions the icons 25px to the left
Related
I basically want to keep the nav with all of its contents at the top of the HTML, but have it moved to the bottom of the page with CSS as I am doing mobile-first approach and want the navigation to appear at the top when I resize it to tablet or laptop. I tried using minus with bottom tag but it takes forever to get it to the bottom and does not seem to be the most efficient way to do it. Is the only way to move the context to the bottom of the page is to put it at the bottom of HTML file or is there a completely different way I should approach this?
This is what I have at the moment:
I want to move the underlined links to the bottom, my code:
#topnavigationmenu li {
display: inline-block;
list-style-type: none;
font-size: 3rem;
padding: 10px;
}
<div id="mainpage">
<nav id="topnavigationmenu">
<ul>
<li> example </li>
<li> example </li>
<li> example </li>
</ul>
</nav>
The easiest solution: You can create two instances of <nav> and show one on mobile and on desktop using media queries.
Possibly better solution: You can use Flexbox (and even CSS Grid I guess) to change the order, so let's say inside the mainpage div you have two sections the nav and a div with your page content:
<nav id="topnavigationmenu">
<ul>
<li> example </li>
<li> example </li>
<li> example </li>
</ul>
</nav>
<div class="page-content">
<!-- Content here -->
</div>
You can add display:flex; to mainpage and manipulate the order these appear on mobile vs desktop/tablet using media queries.
I'd suggest checking these articles out:
Ordering Flex Items
A Complete guide to Flexbox
I'm working at a justified navigation bar. Some of the menu items are in two lines some have only one line. How can I manage it, that all menu items are vertically centered?
My HTML
<nav>
<div role="navigation" class="col-lg-12 hidden-xs hidden-sm hidden-md navi">
<ul class="nav nav-justified">
<li class="active">
<a href="#" >
<span class="glyphicon glyphicon-home active"></span>
</a>
</li>
<li>
<a href="rooms_prices.html" >
Rooms & Prices
</a>
</li>
<li>
<a href="location.html" >
Location
</a>
</li>
...
<li>
<a href="specials.html">
Specials & Events
</a>
</li>
<li>
<a href="contact.html">
Contact
</a>
</li>
</ul>
</div>
</nav>
My LESS:
nav {
margin: 0;
padding: 0;
}
.nav-justified {
width: 100%;
hight: 60px;
> li {
float: none;
alignment-adjust: middle;
> a {
display: block;
text-align: center;
}
}
THX for your hints!
EDIT:
Sorry I've messed up the code. I've left the -Tag out because there ave mor div sections with different navigation bars for several display sizes.
You have a ton of problems here, your markup is incorrect and you're trying to apply styles to elements that don't exist.
You're targeting nav, you have no nav element so you should be using .nav to target the class you've applied the div parent.
<div role="navigation"col-lg-12 hidden-xs hidden-sm hidden-md navi">
This is not valid HTML, it should be:
<div role="navigation" class="col-lg-12 hidden-xs hidden-sm hidden-md navi">
If you have nav items where the text drops down onto two lines considering your menu is justified I'd suggest that your text is too long and you should instead use some CSS3 truncation in conjunction with storing the full name of the menu item in its title attribute so it shows on hover - stretching out your other menu items is going to look strange and will require some hacking to achieve.
.nav-justified a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
The issue you will have trying to vertically center a justified nav is that usually you would make the list items display: inline-block and vertically center them that way, but as justified items they are display: block by default. Additionally Bootstrap applies the border styles directly to the anchors, not the list items, so even if you vertically centered them you'd have borders out of alignment.
I'm using a template, HTML5UP - Miniport, for my web design class - I'm just beginning to learn to code. In order to meet the specification for my class I needed to add submenus/drop-down navbar. This works fine in desktop mode, but when I decrease the size of the windows, I get some problems. The submenus stay inside the fixed navbar, pushing their way between other menus items. Here's a link to what it currently looks like:
https://jsfiddle.net/OrangeJones/9u0seLxu/
The CSS is in the fiddle link, but here's my HTML.
<div class="nav">
<ul class="container">
<li><a class="jumper home" href="#top">Home</a></li>
<li><a class="jumper about" href="#about">About</a>
<ul>
<li>Resume</li>
</ul>
</li>
<li><a class="jumper portfolio" href="#portfolio">Portfolio</a></li>
<li><a class="jumper blog" href="#blog">Blog</a>
<ul>
<li>Best of the Twin Cities</li>
</ul>
</li>
<li>
<a class="jumper contact" href="#contact">Contact</a>
</li>
</ul>
</div>
How can I get it to where the submenus drop down when hovered over or clicked on in small screens instead of taking up main navbar space.
Thank you!
Your CSS for the submenu to show and hide is inside the media query and so the dropdown elements were showing when on a screen that was smaller instead of being hidden, you also had the deceleration of the background for the submenu elements in the media query.
.nav li ul
{
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul
{
display: block;
}
.nav li ul li
{
display: block;
background-color: #282828;
}
Updated fiddle
For the navigation on a website I am making I am using a side bar that is set up using an unordered list. There are also multiple lists inside of lists. I used multiple div's too. I have now run into the issue that form inside of a div I need to set up some code that will contradict the div that it is in. In my case I have css of line-height: 35px; I need to edit this to become 15px.
Here is the code i need to edit it is the center( sub List )
<li>
<h2> Tech Ed. Classes</h2>
</div>
<div id="sidebarLinks"><!-- USE THIS DIV SECTION FOR A LIST WITH BULLET POINTS -->
<ul>
<li><strong><em>Main Page</em></strong></li>
<li>Construction</li>
<li>Drafting</li>
<li>Electronics</li>
<ul id="subList">
<li >INTRODUCTION TO ELECTRONICS</li>
<li>EXPLORING CAREERS IN ELECTRONICS</li>
</ul>
<li>Graphic arts </li>
<li>Manufacturing</li>
<li>Project Lead the Way</li>
<li>Transportation, Distribution, & Logitstics</li>
<li>Wood Working</li>
</ul>
</div>
</li>
You can do this simply by adding a css class to the elements you want to change to be different from the div they are in. For example:
li {
line-height: 35px;
}
.smaller {
line-height: 15px;
}
This CSS will make the line-height on all <li> elements equal to 35px, except for <li> elements with a class of smaller. Those will have a line-height of 15px. For example:
<ul>
<li>This will have a line height of 35 pixels.</li>
<li class="smaller">This will have a height of 15 pixels.</li>
</ul>
<ul class="smaller">
<li>This will have a line height of 15 pixels, the ul has a class of smaller.</li>
<li class="smaller">This will have a height of 15 pixels as well.</li>
</ul>
JSFiddle
I would suggest adding a more specific selector for the inner list. This method would not require any changes to your existing markup:
#sidebarLinks {
line-height: 25px;
}
#sidebarLinks #subList {
line-height: 15px;
}
Here is a fiddle demonstrating the above selectors: JSFiddle
I want the vertical border of the vertical tab to run on the whole page instead of finishing off where the tabs end.
however since I have given border-right on the tab it ends
with the last tab that is trending. Giving border-right to the content makes sure the height of the border is right but it spoils the spacing between tab and content.
HTML :-
<div class='tabbable tabs-left'>
<ul class='nav nav-tabs'>
<li class='active'>
All
</li>
<li>
New
</li>
<li>
Featured
</li>
<li>
Ending Soon
</li>
<li>
Trending
</li>
</ul>
</div>
This is not default Bootstrap behavior so you will have to modify the css a little. For this to work, the vertical tab <ul> and all of its parents should have the property height: 100%.
For html and body I would apply the styling directly but for the <div> and <ul> I would use custom class so as not to modify the Bootstrap classes to maintain expected behavior for eventual future use in other layouts.
Here is a demo.
The css to add:
html{
height: 100%;
}
body{
height: 100%;
}
.tabbable.tabs-left.full-height{
height: 100%;
}
.nav.nav-tabs.full-height{
height: 100%;
}
The html to modify:
<body>
<div class='tabbable tabs-left full-height'>
<ul class='nav nav-tabs full-height'>
...........