I have two issues that I'm trying to solve with the right side of my nav bar.
1) I'd like to have the nav look like this "Login | Contact"
- Currently there's no divider in between, but when I add the divider line, it doesn't line up after the Login text.
2) When viewing the nav on mobile. The Login link stays in the correct place, but the "Contact" link falls down below the logo. How do I get it to lineup along side of the logo>
Here's my bootply:
http://www.bootply.com/waaBbWFaI1
Here's my HTML:
<!-- Navigation -->
<nav class="navbar navbar-default" role="navigation">
<div class="container topnav">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-brand">
<img class="img-responsive" src="https://red.org/wp-content/plugins/a8c-stripe/img/red_logo.png" alt="Red Exchange">
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-nav navbar-right">
<li>Login|</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
<!-- /.container -->
</nav>
Well, first of all I think adding the Divider like this
<li>Login|</li>
Seems to be a bad idea..Imagine You need the space that you are using for the list element for the label and it doesnt have any space left..So what it does is basically that it, puts it into the next line..
I would suggest you to do something like .. giving your anchor tag element(better if it would be wrapped around a div) a border to right
Another solution would be:
<li><a class="login" href="#">Login</a></li>
<li>|</li>
<li>Contact</li>
This would put the divider between those elements but not at the right place just check it. To put it into the right place you will have to give each list element following css.
ul {
display: block;
width: 100%;
height: 100% // only if its already around a header
li {
display: inline-block;
width: 15%; // each element gets 15% of the parents width
height: 100;
}
}
Learn CSS, the problem is that without knowing any css you will not be able to have your website, as you wish.
Issue is, that both are block elements login and contact and if you wrap it and there is no place because the font-size is too big and the elements take the whole space, they will automatically wrap..to the next line.
Sorry, i hope you understood my english.
Related
I have two DIVs in a nav bar stacked on top of each other inside container elements so they can slide up and down and have only one row visible at a time. Below is the markup and styles, stripped down to the relevant bits. I'm using Twitter Bootstrap 3 as well.
#searchrap {
height: 38px;
overflow: hidden;
position: relative;
}
#searchrap .slider {
position: absolute;
height: 76px;
}
<nav class="navbar navbar-default navbar-fixed-top" id="miscnav">
<div class="container-fluid">
<div class="navlinks">
<ul class="nav navbar-nav">...</ul>
<div id="searchrap">
<div class="slider">
<div class="links">
<ul class="nav navbar-nav navbar-right">...</ul>
</div>
<div class="search">
<form class="form-search" id="siteSearch" action="search" method="get">...</form>
</div>
</div>
</div>
</div>
</div>
</nav>
For some reason, when the page loads, the .slider DIV is positioned ~35px too high. I've tried setting "top:0" but it makes no difference. In Chrome dev tools I can uncheck "position:relative" on the #searchrap DIV in the inspector and that causes the .slider DIV to fall into the right position. Then I can check it again and everything is fine--it doesn't go back up. I can fix the alignment issue by setting "top:35px" but then if I uncheck and recheck "position:relative" it makes it 35px too low and I need to reset "top" to 0. I don't like this solution anyway because I don't understand why 0 isn't the top of the viewport.
You can see it in action here: https://www.tntech.edu/dev/ttu15.interior
The search field, which is on the bottom, starts out visible with the nav links above the viewport. It should start out with the nav links visible and the search field below them. What gives?
Thanks in advance!
I have 2 bootstrap navbars immediately followed by 2 horizontally centered dropdown menus as follows...
<div class="bodyWrapper">
<!-- top navbar - doesn't change size-->
<div class="navbar navbar-fixed-top navbar-inverse nav-top">
...
</div>
<!-- bottom navbar - collapses and changes size-->
<nav class="navbar navbar-inverse navbar-static-top" >
...
</nav>
<!-- 2 dropdown menus, always centered, and underneath the navbars-->
<div style="width: 100%;">
<div style="position: relative; left: 50%; top: -20px;">
<nav id="menu" class="menu">
</nav>
<nav id="menu2" class="menu">
</nav>
</div>
</div>
</div>
With just this setup, a horizontal scroll bar appears on mobile devices allowing the user to scroll across to nothing but blank space, other than my top navbar (which for some reason continues to fill the whole screen). I don't know why this happens but to solve it, I can add this CSS...
.bodyWrapper {
position : relative;
overflow : hidden;
}
(I experimented first applying overflow/overflow-x:hidden properties to body/html but it didn't remove the scroll bar on my iPhone).
But the problem with this option is that since the dropdown menus are now inside a wrapper with overflow:hidden, when the user tries to expand them they're cut off.
The only solution I can come up with, it to take the dropdown menus outside of the bodyWrapper div and use absolute positioning on them - but this is a pretty bad option since I'd constantly have to readjust their positioning because the height of the navbars above them can grow.
Anyway, all that's a long way of asking whether anyone can see a better way to deal with this mobile-specific (at least iPhones) issue. Thanks for any thoughts at all!
EDIT
example as requested:
http://codepen.io/d3wannabe/pen/gaVXzO
(the last line of the css can be commented in/out to see what happens to the dropdown)
You can set display of dropdown class to inline-block and its parent to have text-align to center.
.dropdown{
display:inline-block;
}
Check out here : http://codepen.io/anon/pen/aveEoP
I am encountering a weird issue, only in Chrome, which adds extra space on top of an element with float: right, only upon resize (notice how the name then appears under the header fold):
Only when I resize back to the desktop media query do I encounter this issue.
My HTML is like this:
<header role="banner">
<a class = "logo"...>...</a> <!-- inline-block -->
<div class = "client">...</div> <!-- float: right -->
<nav role = "navigation">...</nav> <!-- display: inline-block -->
</header>
See the name "Michael"? It appears to the right, properly positioned in the main navigation. But once the browser resizes, at the end, it is moved to the bottom.
Any idea what's causing this and how I can fix it? I have verified that this occurs with the latest version of Chrome on Windows and Mac.
Switch positions between "client" and "navigation" like this:
<header role="banner">
<a class = "logo"...>...</a> <!-- inline-block -->
<nav role = "navigation">...</nav> <!-- display: inline-block -->
<div class = "client">...</div> <!-- float: right -->
</header>
The problem is that the navigation menu was floating around your "client" container. The elements after the floating element will flow around it when they are close.
Bootstrap newbie here. I've only today started using Bootstrap to develop a website with, but something's going on that I can't figure out. I am using the following code to create my navigation:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<ul class="nav navbar-nav uppercase bold">
<li>Projecten</li>
<li>Over</li>
<li>Contact</li>
</ul>
<a class="navbar-brand pull-right" rel="home" href="#"><img src="images/97x30.png" style="margin-top:-4px;"></a>
</div>
</div>
The idea is that there's a set of links aligned to the left, and a logo is displayed aligned to the right. Now I have noticed that this works fine as long as the browser window size is larger than 768px (where the bootstrap css still assigns a width to .container) but when the window becomes smaller (and the .container class no longer has a width, I believe), the links on aligned to the left of the navbar start stacking vertically, instead of horizontally.
The uppercase and bold classes in the ul are included in my custom css, to style the links.
If I were to guess, it has something to do with the "block" alignment or perhaps the .container becoming too small to fit the links horizontally, but I am unable to figure this out, and could not find a similar problem on the web.
I figure this is probably something very simple and makes me look stupid, but I hope you can help. Thank you.
You can add CSS like this to prevent it from stacking..
.navbar-nav {
min-width:360px;
float: left;
margin: 0;
}
.navbar-nav>li {
float: left;
}
http://www.bootply.com/114462
<div class="span12">
<div class="row">
<div class = "span6"><h1>The big text here</h1></div> <!-- end of span6-->
<div class = "span5 offset1">
<nav class = "navbar">
<div class = "navbar-inner">
<ul class = "nav">
<li>Link1</li><li class="divider-vertical"></li>
<li>Link2</li><li class="divider-vertical"></li>
<li>Link3</li><li class="divider-vertical"></li>
<li>Link4</li><li class="divider-vertical"></li>
<li>Link5</li>
</ul><!-- end of nav -->
</div><!-- end of navbarinner -->
</nav><!-- end of nav -->
</div> <!-- end of span4 -->
</div> <!-- end row -->
</div> <!-- span 12 -->
So thats my navbar and it has five items and i see the extra gap after the link5
currently both the text and the nav bar are in "span12" and "row" and then "The Big text here" is in "span6" and the navbar is in "span5 offset1" i tried using the span4 for navbar but it takes the links to the next line, now what should i do to make my link5 navbar look the same as others ?
It seems that you would need to float your .navbar to the right in order to stop the 100% width and make the element only as big as it's content
jsFiddle: Demo
Please notice in the fiddle on the markup in line 8 where I add the class .pull-right to make the navbar float to the right.
It's also worth to note that the .row class acts like a .span12 so you don't have to wrap your menu in it. Also note that your menu items will eventually stack if the window gets too narrow, but that's topic for another question on how to go about that.
As a little extra advice, you should try to format your code a little bit more so it's easier to read and debug.