Struggling a bit with some CSS navbar layouts and positioning the logo in the right hand side of the navbar.
Fiddle.
<div class="container-fluid">
<div class="navbar navbar-fixed-top navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navbar-offcanvas" data-canvas="body">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand pull-right" href="#">
<img src="http://assets.inhabitat.com/wp-content/blogs.dir/1/files/2010/05/BP-Redesign-Contest-4-75x75.jpg" alt="Alternate Text for Image" >
</a>
<div class="navbar-offcanvas offcanvas navmenu-fixed-left">
<a class="navmenu-brand" href="#">eServices</a>
<ul class="nav nav-justified">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</div>
</div>
</div>
</div>
Notice that the logo is positioned improperly.
When you hover over Menu 4, the effect is that the logo gets covered with the hover effect.
What I want to accomplish is something similar to this:
Notice that the logo is outside the navigation menu item, so that when I hover over the menu, the logo doesn't get covered.
Also, I need the logo to be positioned, right beside the collapsed navigation bar (as shown below) when the page is being viewed in mobile devices.
What proper css (or html tags) do I need to set to get this? Totally struggling with this for quite some time already.
Thanks.
Update: The fiddle must be viewed on Chrome (not sure why FF does not justify the nav items).
I think that I got the effect that you were going for. http://jsfiddle.net/0g9w8zza/4/. The following was added:
.nav {
padding-right: 75px;
}
.navbar-toggle {
position: absolute;
right: 75px;
top: 0;
}
Two things were added:
The hover state problem was happening because the menu technically extended all the way to the right side. Adding padding-right gives the logo white space in which to live (with your existing position: absolute; right: 0.).
The .navbar-toggle was also there, but hidden behind the image. position: absolute; right: 75px; puts it in the right place.
Note: Both classes assume your logo will always be 75 pixels. Alternate scenarios:
If you are using a CSS Pre-Processor like Less or Sass, use a variable here to make changes easier.
If you are using a fluid logo width, you can use percentages. I demonstrate this here: http://jsfiddle.net/0g9w8zza/6/. (In the Fiddle, logo width is 20%, and it still works; scale the Run window up and down to check).
(Let me know if this doesn't address your question, and I'd be happy to revisit).
Related
I have put an image on the top of my page, but I also want to insert a navigation bar on the top of the page (in front of the image). But the reality the navigation bar is above the image, I cant put them both on the same row, I can do it with make the navibar fixed top, but its really annoying when I scroll down. Is there any way to solve my problem?
(PS: Image is not a background!)
<nav class="navbar " role="navigation">
<div class="container-fluid">
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<li>
<a> Link </a>
</li>
<li>
<a> Link </a>
</li>
<li>
<a> Link </a>
</li>
<li>
<a> Link </a>
</li>
<li>
<a> Link </a>
</li>
</ul>
</div>
</div>
</nav>
<img src=" ">
This should work:
.navbar {
position: absolute;
top: 0;
left: 0;
}
See: https://jsfiddle.net/tcybj6sj/
You basically had the right idea: Pin the nav bar to the top of the page. But instead of using position: fixed, which pins the nav bar to a fixed position within the browser window, use position: absolute, which pins the nav bar to a fixed position within the page.
I'm trying to make my current CSS navigation responsive for mobile devices.
I currently have it set up with a media query so that when the screen width falls below the specified size it changes to block form (stacked) and a menu icon appears on the right hand side of the logo (to later be made into a button).
The problem I'm currently having is that the drop down menu which is used for my second link in the navigation, is causing a gap to appear between the second and third link (as if the drop down content is taking up the space whilst hidden).
I've tried looking for solutions but can't seem to find the right answer for my particular setup. Basically, the link "How It Works" should sit right beneath "Sections" when on mobile.
http://jsfiddle.net/fc45c7p5/
<a href="#">
<img class="logo" src="images/logo.png" alt="Logo" style="width:330px;height:100px"/>
</a>
<div id="menu-icon"></div>
<br></br>
</div>
<div class="navbar">
<ul class="navbar cf">
<li>HOME</li>
<li>SECTIONS
<ul>
<li>RETAIL</li>
<li>HOTEL</li>
<li>RESTAURANT</li>
<li>SHOPPING</li>
</ul>
<li>HOW IT WORKS</li>
<li>OUR EXPERIENCE</li>
<li>TESTIMONIALS</li>
<li>NEWS</li>
<li>CONTACT US</li>
</ul>
</div>
Don't take too much note of the media query max-width of 1008px, I'm aware this isn't standard mobile size, it's just temporary whilst I get it working first.
Any help regarding this is really appreciated.
visibility keeps your elements there without displaying them. You should use display:none when you do not want show the space the hidden element takes. Use display:block to show them again. Add some CSS transitions to the height of the a elements to make the reveal somewhat smoother.
Here : http://jsfiddle.net/6eshy7n2/
Add the following.
ul.navbar ul li { float: none; width: 100%; display:none;}
ul.navbar li:hover > ul li{display: block;}
You have to make the lis inside the uls actually not display when the parent li is not being hovered. When it is hovered you then change the display value to block to make it visible.
I am using jQuery Mobile to create my mobile application. I have a plus button which appears like this:
The issue is that it is down, touching the list item. How do I make the button positioned midway between the list item and the horizontal line above it? I attempted to use absolute positioning using css, which did not work.
Here is my code:
<span style="float:left;color:black;font-weight:bold;font-size:24px"><label for="newpostbutton">Posts</label></span>
<span style="float:right;"></span>
<br>
<ul data-role="listview" data-inset="true" id="threads">
<li>No conversations :(</li>
</ul>
Any help would be appreciated :D
nshah, you can always give your button a negative margin-top and play around with the numbers. But it looks like there is probably more going on with the default button styles. I would look there first.
margin-top: -15px;
The floated elements needed to be cleared.
div {
overflow:hidden;
}
<div>
<span style="float:left;color:black;font-weight:bold;font-size:24px"><label for="newpostbutton">Posts</label></span> <span style="float:right;"></span>
</div>
<ul data-role="listview" data-inset="true" id="threads">
<li>No conversations :(
</li>
</ul>
http://jsfiddle.net/g9UM4/2/
Here is the jsfiddle for it http://jsfiddle.net/8PcxE/
<div id="container">
<div id="header">
<div id="nav-container">
<ul id ="nav-list">
<li id=nav-title>lymbo</li>
<li>Playmaps</li>
<li>Map</li>
<li>About</li>
<li>My Account</li>
<li>Log Out</li>
</ul>
</div>
</div>
It is fine on a wider page, but when I run it on a small page everything is cramped and the options get pushed together making a zipper-like pattern.
My other problem is when I type something in my headers or paragraphs it will be at the top and intersecting with my navigation bar making it look like a mess.
My goal is to make a sort of "gradient" looking navigation bar hence the shadows. But that also doesn't seem to look right. If someone can give me some input on that, it would be much appreciated.
I found that after I changed my nav-container CSS to position: relative from position: fixed it works out. Are there any negative effects of doing this?
Since you've changed all the <li> to inline, the simplest solution would be to prevent wrapping on the <ul>:
#nav-list {
white-space: nowrap;
/* ... */
}
http://jsfiddle.net/mblase75/Lt72p/
I'm starting with Bootstrap and have a small problem with the navbar-element. I need to declare a container with the width of 1024px and have to add two navbars. On at the top and the other one below it. Both navbars need a distance from the right div of 0px.
(Stackoverflow doesn't want to let me post pictures, but I think it's much more easier if you can see what I mean: http://www.abload.de/img/asdjraik.png)
As you can see the first navbar is working correctly, but now I need another one below it. Padding from the container under it should be exactly 5px.
My problem is, that the other navbar gains the same padding from the top as the first navbar. I can't get it below the other one. When I define the following classes for this problem another one comes up:
.small-margin {
margin-top: 20px;
}
.big-margin {
margin-top: 110px;
}
My HTML looks like this:
<div class="navbar small-margin">
<div class="navbar-inner">
<div class="pull-right">
<ul class="nav">
<li>link 1</li>
<li>link 2</li>
</ul>
</div>
</div>
</div>
<div class="clear"></div>
<div class="navbar big-margin">
<div class="navbar-inner">
<div class="pull-right">
<ul class="nav">
<li>another link 1</li>
<li>another link 2</li>
</ul>
</div>
</div>
</div>
The second navbar appears on the left side of the first navbar and not below it. I tried a lot of CSS-fixes.
Anyone have a idea how to get the 2nd navbar below the first?
Thanks in advance!
I've tried your code and it's works
I also tried adding it into 1024px container
.container{
max-width: 1024px;
}
this is the result
Your css code must be conflicted with the bootstrap. maybe you could try wrapping each navbar with .row. I believe that this solution is surely make all navbar separated.
<div class="row-fluid">
<div class="span12">
... navbar 1 ...
</div>
</div>
<div class="row-fluid">
<div class="span12">
... navbar 2 ...
</div>
</div>