I'm using:
http://bootsnipp.com/snippets/featured/large-dropdown-menu
I would like to have the menu aligned with each menu item.
I don't want that the menu starts on the left:0 on the all items.
I have already achived this with the classic dropdown menù.
Do you think is possible with no hacks and pure bootstrap and large menu dropdown?
Let me know, Thanks.
Yes, that's possible, but on the last items you will have some issues:
http://jsbin.com/nehafi/
.dropdown-menu-large {
margin-left: 16px;
margin-right: 16px;
padding: 20px 0px;
left:auto; /* added */
}
You might want to check out http://geedmo.github.io/yamm3/ - which gives you about 10 lines max of css to do a lot more with the menu position.
Related
It is possible to move sub menu position to top of the screen. I am using the new menu component. Which way to declare it is to use it, all you have to do is write <Menu mode= {mode} theme={theme} items={items}/>.
Submenu position on default:
And this is my expected condition:
The blue line is menu, and the red line is submenu. The way I did before was to create a new menu and place it at the top of the screen
But I think it will be a lot of trouble if you use it that way. So I want to switch ways by moving the sub menu to the top of the screen. Is that really possible to do?
You can always override the ant design css styles to achieve this. The sub menu items are the usual ul & li pair. To display li items in a line we just need to -
ul li{
display: inline;
}
We can apply the same to ant design menu items & a few tweaks -
.ant-menu-vertical.ant-menu-sub > .ant-menu-item {
display: inline;
}
.ant-menu-submenu-popup {
top: 0px !important;
right: 5% !important;
left: auto !important;
width: 400px;
}
Output
This wordpress website http://www.sulu13.net/14 has a responsive logo and menu that I wanted centered in order to line up with the edges of the content below in the posts. So I added:
.tc-header .brand a { /* Logo */
position: relative;
left: 200px; }
.navbar .navbar-inner { /* Navbar */
position: relative;
top: 130px;
left: 380px; }
Upon adding this CSS, the screen gets a horizontal scroll bar and has white space (equal to the left: 380px) on the right side of the screen. Something tells me it has to do with the responsive menu button sharing the same classes, .navbar .navbar-inner as the non-responsive menu. I would change this, but my knowledge of PHP is limited so I wouldn't know where to start.
I've tried removing the JQuery menu itself, but this had no effect, (my guess is..) because I didn't actually remove the responsive menu button/menu.
Here's the main CSS file - http://www.sulu13.net/14/wp-content/themes/customizr/inc/css/green.css?ver=3.1.6
Any ideas would be appreciated, thanks in advance for your time.
Ian
width:100% (default width) + 380px (left value) = 100% + 380px
You would need to resize the navigation to compensate for the moving over if you want it to leave it the way it is, meaning something like width:calc(100% - 380px);
However, I'd recommend not using absolute position to be more responsive and not require the manipulation of values.
Remove the left:380px
Apply this:
#menu-my-menu {
float:right;
}
This approach also allows more list elements to be added and they will automatically be positioned correctly
Use this:
.navbar .navbar-inner { /* Navbar */
position: relative;
top: 130px;
}
So, remove the left:380px. I don't understand what you mean by centering the menu and aligning with the text below, as the container of the text is wider than the one of menu and logo together and if you align the menu with the post below it will not be centered anymore. But removing left property should give you what you want.
Thanks for the help guys!
I went back and gave it a closer look, turns out I was able to solve the issue with a wrapper and a few media queries for width adjustments.
here is the fiddle:
http://jsfiddle.net/frcdd/
This is a drop down menu using jquery. Now if you click on the fiddle you will see the problem.
When one clicks on a menu item say "canada", the menu will open fine and display the animation, however the background of the menu items will be clipped top and bottom. I am not sure what is going on. I suspect a CSS error somewhere but I have spent hours looking so here I am. Also, I can't seem to figure out how to change the text-decoration to none and change the hover, active, link, visited colors of the menu items.
div.container {
background:#292B29;
padding-top:0px;
margin-top: 0px;
padding-bottom:0px;
padding-top:0px;
Your uls has a margin 16px. Put margin 0px on it
.container ul{
margin: 0px;
}
Modified Fiddle
To change anything on visited anchors put pseudo class :visited
a:visited{
color: blue;
}
Site URL: http://scc.maxworks.org/wo-wp0001/
I needed to get the search box into the nav menu at the top of the site, which I did (it's a div inside an unordered list) and it places where i want it to when on a computer screen. now i'm trying to get it to behave as I would like to when on a tablet or phone - which is that I'd like to to align to the left side of the screen when you click the menu icon to open the list. (Actually i'd like the search box to appear next to the menu icon but i think thats beyond my skill to do at this time. So i'm trying to align it to the left when in the smaller views.
I am using bootstrap.
in bootstrapwp.css
find
ul#main-menu.nav li form#searchform div {
display: block;
overflow: hidden;
padding: 0 0 0 380px;
}
remove padding
ul#main-menu.nav li form#searchform div {
display: block;
overflow: hidden;
}
I think you want to check this out. You could use the Responsive utility classes. So put 2 searchboxes in and hide on the not wanted resolution. Might be not the ultra super best way but it works and it is quick.
There might be some fancy js way to accomplish this, can't help you there.
Did some searching but only found info for the megaBar. Would like to have 100% width dropdown widths and implement it with as little css/js on top of Foundation as possible.
I'd like to do a sub menu (ul > li.has-dropdown -> ul.dropdown) that is 100% window width similar to the one on Mashable and shows on hover. The Foundation megaBar is outside of the nested nav structure but that's not what I'd like for my Wordpress template (want to stay in the nested walker type menu tree).
If you hover over any of the top menu links on Mashable, you'll see the dropdown submenu I'd like to copy (just the structure, not the content).
I'm using Foundation 3.2 and have the <div class="contain-to-grid fixed"><nav class="top-bar"> setup so that it is fixed to the top and always 100% window width while the top-bar has a max-width: 1440px, just like the Mashable site.
Now I just need the dropdown (sub menu) part sussed out.
This will reset your top bar submenu to be 100% of your top bar's width and will organise your submenu items in responsive columns, just as a flyout content but still preserving the navigation behavior on the small screen size
#media only screen and (min-width: $screenSmall) {
nav.top-bar > section > ul > li.has-dropdown{
position: static;
& > .dropdown{
#include outerRow();
& > li.has-dropdown{
#include column(3);
min-width: auto;
.dropdown{
#include outerRow();
position: static;
visibility: inherit;
top: auto !important;
left: auto !important;
padding: 0;
min-width: auto;
li{
#include column(12);
min-width: auto;
}
}
}
}
}
}
Foundation does come with the functionality for a dropdown menu, so you could replicate the type of navigation used by Mashable with the Foundation framework.
If you read the documentation:
http://foundation.zurb.com/docs/navigation.php
You'll see that in the Nav Bar example, Nav Item 4 has a dropdown with its own rows/columns. As per the docs, "You can also have dropdowns with a specific size which can contain any kind of content, including rows and columns."
You should be able to specify the size of the dropdown so that it spans the page, by using CSS to alter the size of the flyout class.
I searched everywhere for an easy answer to making the drop down mega menu 100% of the container and found it here:
http://codepen.io/sldavidson/full/Jseph
The one essential style was this:
.open {left: 0 !important;}
This UI component is not part of Foundation (see Foundation Components). As you already mention, the dropdown menu is limited to showing nested menu elements.
Creating the same functionality as in the Mashable site is out of the scope of Foundation and will involve developing it by your own. The question is IMHO not suitable to be answered in Stack Overflow.