I am trying to make the horizontal dropdown menu to take the whole width of the body. The dropdown-menu should start from the left in the following fiddle.
FIDDLE HERE
The Sub List 1 should start from the Logo+Text area and should flow till the li continues.
HTML:
<div class="container">
<div class="row">
<div class="col-md-12">
<div>
<span>Logo+Text</span>
</div>
<div class="btn-group" style="margin-left: 200px">
Lists
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
<li>
Sub List 3
</li>
<li>
Sub List 4
</li>
<li>
Sub List 5
</li>
</ul>
</div>
</div>
</div>
</div>
Just use position: initial;to the parent class btn-group. if not working, then use !important.
View my demo on JSFIDDLE
Good practice is: Add a new class has_dropdown to btn-group. Then style by has_dropdown class. Try as my demo.
One way to do this would be to move your style="margin-left: 200px" CSS declarations to the dropdown-toggle anchor item, instead of the btn-group. That way, your container and consequently, your dropdown menu remains aligned to your logo while the trigger gets pushed to the right.
Related
I am trying to do this:
and mine looks like this:
Not the most beautiful thing.
My questions are:
We have a header with logo, search bar, menus and a button. How can i stack them all inline?
On the div with the background image - how can I position the headline like the one in the original site?
1) Have a look at the Navbar component documentation. Items should already be inline if implemented correctly. You can use the navbar-left and navbar-right classes to position items in the navbar.
2) You'll notice the large centre text starts at the same position as the navbar logo. This is because of the container class. I suggest you analyse some examples to see how to correctly implement the container.
After that, if you're still struggling add your styles.css to your pastebin post or better still create a Codepen - this would allow someone to be more helpful.
1- you can write float:left; or float:right; ? look for this float
2-for position an element you must create a relative div later inside create absolute div.. and you can specify settlement coordinates with top right bottom left.. look here position
I would say float is not good practice to use . Unless you really have no choice to use.
But based on how I look at it.
It's achievable using flex.
Put a display:flex on your main div
Then as for your other elements . Use display:flex-grow
It's advantageous using flex. , not only it wil solve your problem. It makes your site responsive.
Cheers
[![if you need all navigation item in one line. you have to make display:inline-block,for navigation.
change your code to:
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 nav-wrap">
<ul class="pull-left"><li></li>
</ul>
<ul class="pull-left">
<li class="formSearch">
<input type="text" placeholder="Find Freelancers" id="searchButton">
</li>
<li>Browse</li>
<li>How it works</li>
</ul>
<ul class="pull-right">
<li>
<a href="#" class="signupHover">
<span class="icon signup"></span>
<a href="#">Sign Up
</a>
</a>
</li>
<li>
<a href="#" class="loginHover">
<span class="icon login"></span>
Login
</a>
</li>
</ul>
<button type="button" id="buttonHeader">Become a freelancer</button>
</div>
/*add below css*/
.nav-wrap ul li{display:inline-block;}][1]][1]
I'm trying to stop moving objects when hovering.
See what i'm doing here>JSFIDDLE
When hovering the second link (TEST2), it changes to bold property (need to be), but it pushes the other button (TEST) to the left. How can i anchor other elements in the header and stop their movement?
give an item class to normal list elements and seperator class to seperator list element
<div class="header-bg">
<div class="container">
<div class="menu-header">
<nav>
<ul>
<li class="item">Test</li>
<li class="seperator"><span>∴</span></li>
<li class="item">Test2</li>
</ul>
</nav>
</div>
</div>
</div>
and give a fixed width to list elements at .item class
.item {
width:70px;
}
working demo
give them a fixed width, ie width:80px
I am trying to make a three tiered CSS style menu.
Jsfiddle here : https://jsfiddle.net/kBVYD/1/
What I need to accomplish is to have the third tier of the menu to stay aligned with the parent menu. When you hover over menu item A, Menu B dropsdown. When you hover over the menu items in the dropdown they show a third dropdown to the right of Menu B.
Right now the third menu (products) when hovered is floating to the left, and it should be droping down under the initial menu item.
<div class="full_width">
<div class="wrapper">
<div class="page-wrap">
<ul class="dropdown">
<li>HOME</li>
<li>PRODUCTS
<ul class="sub_menu">
<li>
Compliment Containers<span class="span_right">»</span>
<ul class="test">
<div class="menu_level3_01">
<span>Wastebaskets</span>
<span>Compost</span>
<span>Curbside</span>
<span>Deskside Recycling</span>
</div>
<div class="menu_level3_02">
<span>Large Trash Collection</span>
<span>Large Reycling Collection</span>
<span>Waste Streaming Containers</span>
</div>
</ul>
</li>
</ul>
</li>
<li>PRODUCTS
<ul class="sub_menu">
<li>
Compliment Containers<span class="span_right">»</span>
<ul class="test">
<div class="menu_level3_01">
<span>Wastebaskets</span>
<span>Compost</span>
<span>Curbside</span>
<span>Deskside Recycling</span>
</div>
<div class="menu_level3_02">
<span>Large Trash Collection</span>
<span>Large Reycling Collection</span>
<span>Waste Streaming Containers</span>
</div>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
You just need to make the second tier relative and left: 0.
#menu1 ul.menu li ul.sub-menu li ul
{
position: relative;
display: none;
left: 0%;
}
https://jsfiddle.net/kBVYD/34/
I think this is what you want: Fiddle
You need the parent of the last menú (the "li") to NOT have position relative so the last menu absoluted position won't depend on the parent.
The as you have fixed values it's easy to set the submenu right where you want with 5px top (the margin of the first submenu with the main menú and the just a value for the left position, in this case 180px).
basically I've just added this to the fiddle:
.sub-menu > li {position:static !important;}
.sub-menu ul {top:5px !important; left:180px !important; }
Edited: the !important is just to overwrite your css's in the fiddle. You may better implement this attributes insteed of the others for a cleaner css sheet.
I've recently started using bootstrap 3 and I'm really loving the grid system.
I am however stuck trying to implement the following layout.
Is it possible to create something like that with bootstrap?
I have read on the documentation about Column wrapping, is that the way to go?
What would be the best approach to achieve it?
What people often forget when using bootstrap is that it is fully customisable. You can use your own css to size and position divs as long as your css code goes after bootstrap.
Here is something similar to what you are trying to achieve: fiddle
<div id="wrapper" class="">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
Dashboard
</li>
<li>
Shortcuts
</li>
<li>
Overview
</li>
<li>
Events
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Simple Sidebar</h1>
<p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
Toggle Menu
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
I don't think that you can do it only with bootstrap.
You should probably use https://github.com/desandro/masonry that solves this exact problem.
Bootstrap uses float to position your columns, while Masonry compute absolute position to put the div on the right place.
You can still use Bootstrap for defining responsive behaviour of your column (the width propriety)
So at the top of my page I have a title and a facebook logo. Here's a working example: fiddle
So everything is in a neat row at the top of the page. However, I want the logo and the text Join us on... to be on the right side, and the heading stays where it is. I've tried adding class="pull-right" to the 2nd and 3rd <li> elements, like this. But you can see how that really screws up the vertical alignment. Other than the alignment that's how I want it to look.
Any ideas on how to fix the alignment?
You can apply the pull-right on the li. Also, H4 will cause a break so, you should put the img and "Join Us..." inside the H4.
Try this:
<ul class="inline">
<li><h3 class="muted">Heading</h3></li>
<li class="pull-right">
<div class="media">
<h4 class="media-heading">
<a href="#">
<img src="http://cache.boston.com/universal/site_graphics/facebook/facebook_logo_36x36.png" style="max-width:100%;" alt="Join us on Facebook" />
</a>
Join Us on Facebook
</h4>
</div>
</li>
</ul>
you should add another element and give it "pull-right" class. Your join us code should be in that .
So you should have like this;
<ul>
logo
</ul>
<ul class="pull-right">
join us
</ul>