I want to put the menu-icon on the left hand side of the nav bar when it goes into mobile. For the life of me, I can't find any documentation how to do this. If tried putting the code in different place and using floats with custom CSS but can't get it to budge, is it possible?
Here is my code:
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="left">
<li class="active">Home</li>
<li class="divider"></li>
<li class="active">Archives</li>
<li class="divider"></li>
<li class="active">Contact Us</li>
</ul>
</section>
add this to your css
.top-bar .toggle-topbar{
left:0px
}
Default css has right:0px
Related
I am trying to do a master page for my web page. I'm using HTML5 and Bootstrap framework. On the top of page there will be a bar that contains a dropdown menu and I would like to align this dropdown menu to the right.
<div class="navbar-collapse collapse" id="navbar-mobile">
<ul class="nav navbar-nav" style="">
<li class="dropdown">
Departments<span class="caret"></span>
<ul class="dropdown-menu width-200">
<li class="dropdown-submenu">
<li>E</li>
<li>F</li>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</li>
</ul>
I tried
<style="float:right;">
but it didn't work and i think the reason is dropdown class is not allowing it to work. It worked with using
<style="padding-left:680px;">
but i guess it's not the right way of doing this, there must be a better way. Also what happens if I use "padding-left" and I want to add something to the left of this "li" element?
This is the screen output of the bar I am talking about.
The question is that how can I do that alignment?
Thanks
Best regards
You can use .pull-right class to ul element which is comes with bootstrap.
HTML Example
<ul class="nav pull-right">
<li class="dropdown">
<a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">
Menu 2
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Logout</li>
</ul>
</li>
</ul>
For those using Bootstrap 3, .navbar-right would do the trick.
<ul class="nav navbar-nav navbar-right">
</ul>
To right-align a menu, use .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
Wrap your dropdown with <div align="right">...</div> this will ensure the text in the dropdown is all right aligned.
You can use the "navbar-right" class <ul class="nav navbar-nav navbar-right">.
I recommend you to look at the bootstrap documentation and check this link bootstrap navbar component
I've tried a few tricks to try and move the menu on the left, but none of the regular classes appears to be fit to toggle this option, especially on mobile devices (which is what I'm designing for).
Is there a mobile device CSS fix for this? (note I've already got "class='left'" on the menu area).
<nav class="top-bar" data-topbar role="navigation" data-options="is_hover: false">
<ul class="title-area">
<li class="toggle-topbar menu-icon"><span></span></li>
<li class="name">
<h1><img style="width: 150px;"src="yourmomslogo.png"></h1>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="active">Login</li>
<li>Your Cats</li>
</ul>
</section>
</nav>
Let see the doc
If you change left by right in this code
<ul class="left">
<li>Left Nav Button</li>
</ul>
You can see the link goes to the right, so the left class changes the position of the link (so the menu for you)
how is possible to make simple top menu in foundation 5? Is needed to use topbar or is there any other possibility? My actual code is:
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>Site Name</h1>
</li>
<li class="toggle-topbar menu-icon"><span></span></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="active">Domov</li>
<li>Home</li>
<li>Menu item</li>
<li>Menu item</li>
<li>Menu item</li>
<li>Menu item</li>
<li>Contact</li>
</ul>
</section>
</nav>
But i have problem with mobile version. Navigation is broken and jumps under menu not collapse in simple button. Can someone tell me why? and how to fix it, or make more simple navigation? Thanks.
This is a standard foundation .top-bar navigation. Don't forget to include the necessary js files and initialize them as well.
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">Right Button Active</li>
<li class="has-dropdown">
Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
<li class="active">Active link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
Just add this
.top-bar {
overflow: visible;
}
DEMO
I think , instead of using topbar , you can use iconbar which will easily meet your requirement . UI will be same for mobile as well as for desktop version .
Check below link:
http://foundation.zurb.com/docs/components/icon-bar.html
I have a top bar navigation and need a single item and its dropdown to have a different background colour from the rest. I have managed to change the background colour of the item but cannot change its dropdown. I have figured out how to change the drop menus for all items and I have tried all different variations to get this to work with the single item but nothing works.
Can anyone help?
Just to clarify, I am trying to select the dropdown on the right hand side with the id of account and class of top-bar-colour. Thanks
NB: I am using foundation 5. I originally had that info in the title but someone deleted it, not sure why :/
.top-bar-section .top-bar-colour {background-color:red} //this works
.top-bar-section .dropdown li a {background-color:red} //this doesn't as it changes all dropdowns
.top-bar-section li a.top-bar-colour .dropdown li a { background-color:red} //this doesn't work either
<nav class="top-bar" data-topbar >
<ul class="title-area">
<!-- Title Area -->
<li class="name"> </li>
<li class="toggle-topbar menu-icon"><span></span></li>
</ul>
<section class="top-bar-section">
<!-- main nav section -->
<ul class="left">
<li><i class="fi-home medium"></i></li>
<li class="has-dropdown">
menu
<ul class="dropdown">
<li>Dropdown Level 1</li>
<li>Dropdown Option</li>
<li>Dropdown Option</li>
</ul>
</li>
</ul>
<ul class="right">
<li class="has-dropdown" id="account">
<i class="fi-torso medium"></i>
<ul class="dropdown"><li>Login</li></ul>
</li>
</ul>
</section>
</nav>
Assuming you want to change the color of the bar and drop down of the first one you can use this css
.top-bar-section .left .dropdown li a {background-color:red}
Let me know if my assumption is right
I'm using the dropdown from
http://www.lwis.net/free-css-drop-down-menu/
My menu has Home|About|Register|Login
I would like the menu to look like
Home|About|Register|Login<-----------------stretch till end ----------------->
What i'm doing now is create an extra li and add " " to it. The code is as below
<div id="mymenu">
<ul class="dropdown dropdown-horizontal">
<li class="first">Home</li>
<li>About</li>
<li>Register</li>
<li>Login</li>
<li class="last"><span> </span></li>
</ul>
</div>
Is there a better way to do this?
Also how do i highlight choosen menu item like for example if i click home the menu home should be highlighted.