bootstrap "mega-dropdown" centering main menu nav items - javascript

I am trying to build a main menu navigation with a full width screen drop downs below it. I found an awesome example to build off of, but I cannot seem to figure out how center the main menu items themselves.
Here is what I have so far, See example here : http://codepen.io/ajmajma/pen/ALJbdk .
This works perfectly, however I need those main menu items (home, about, etc..) to be centered.
My first thought was to inline-block them, however this causes some screwy behaviour with the sub menu.
IF I add
.desktop-nav {
text-align: center
}
.menu {
display: inline-block
}
I get the desired centered effect, however the sub menu is confined the the small center size of the ul, and I need it to remain the full width of the page. See behavior here - http://codepen.io/ajmajma/pen/wzYPQm .
Any idea of how to fix this to get desired effect? Thanks!

You could add a text-align:center to the ul and add a display:inline-block to the li. Just remove the float:left from the li and you're good.
.menu > ul {
margin: 0 auto;
width: 100%;
list-style: none;
padding: 0;
position: relative;
box-sizing: border-box;
text-align:center;
}
.menu > ul > li {
display: inline-block;
padding: 5px;
margin: 0;
}
http://codepen.io/Founded1898/pen/amREJm

I have found the solution to this:
.desktop-nav {
margin-left: 50%;
}
.menu > ul > li > ul {
margin-left: -50%;
}
If you don't want to set the margin in the desktop, you have to create a something like .iWantThisMenuToCenter {margin-left: 50%}and assign it to the <nav> tag.

Related

Bootstrap dropdowns want to force accordion style always

I am working from this tutorial for side navigation with bootstrap.
So far my side nav looks great, however I want to force the drop downs to be the accordion style they are when the are in the mobile (collapsed) menu, all the time.
In other words I never want me dropdowns to "pop-over" other content I want them to expand.
So I want this effect always:
Even when the menu is at the side like this:
Anyone know how to achieve this???
You'll need to adjust the given CSS some...
/* make sidebar nav vertical */
#media (min-width: 768px) {
.sidebar-nav .navbar .navbar-collapse {
padding: 0;
max-height: none;
}
.sidebar-nav .navbar ul {
float: none;
}
.sidebar-nav .navbar ul:not {
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
}
As you can see, the CSS changes at a width of 768px. Change that value to whatever size screens you wish to target, and you'll get the result you're after.

Responsive dropdown menu conflict

I have been fiddling around with a menu-experiment that is based on 'responsive-nav.js' and trying to add dropdowns to it. All would be fine, but for some reason I am not able to get the dropdowns to appear right. Even with making them to absolute position within a relative container. I am sure it is something simple, but just can't get my head around it.
If I delete the script bit at the bottom it works but this way I loose the toggle-menu.
I created a lint for this:
https://dl.dropboxusercontent.com/u/5791486/dropdown2/index.html
The answer is as suggested below: overflow:visible, but to make the toggle fluid I had to create an extra media queries for this:
.js #nav {
clip: rect(0 0 0 0);
max-height: 0;
position: absolute;
display: block;
overflow: visible;
zoom: 1;
}
#media screen and (max-width: 40em) {
.js #nav {
overflow: hidden;
}
}
That was it, Thanks again!!!!
Tou have to set top: 100%; on #nav ul li:hover ul to let the submenu align to the bottom of their parent.
#nav ul li:hover ul {
display: block;
position:absolute;
top:100%;
}
Example: http://jsfiddle.net/UG9cy/

html - css block Width/Height

I have the following CSS code:
#nav {}
#nav a {
position: relative;
display: inline-block;
color: #F0F0F0;
width: 1em;
height: 2em;
line-height: 0.9em;
}
#nav a.icon:before { padding-right: 0;}
<nav id="nav">
<span>Home</span>
</nav>
But if the text is longer than 10 characters, it is automatically making a paragraph, making the text out of the original box. How can I prevent this?
Edit
All i want the background box in the screenshot to get bigger in width as the text is longer
http://prntscr.com/2cd973
if your aim is to display it all on the same line, you just need to remove width:1em; from #nav a
if you want to hide the text that is overflowing add overflow:hidden; to #nav a
if you want the a tag to adapt height and width to its content remove width:1em; and height:2em; from #nav a
You can display your content as a table-row. Then your links will be displayed as new columns in a table.
#nav {
display: table-row;
}
You can see the results on this fiddle.
Add this in #nav :
word-wrap:break-word;

Adding icon using css :before

I'm using superfish menu for the WordPress. I want to add some margin between the menu parent item and its dropdown and want to add an icon on the top of the drop down, so that it looks like following image:
The menu markup is automatically generated by the WordPress so it cannot be changed. I'm trying following CSS but it does not seem to work:
ul > li ul.subs{
margin-top: 10px;
}
ul > li ul.subs:before{
content: " ";
display: block;
height: 10px;
width: 20px;
position: absolute;
top: 0;
background: url('http://i.imgur.com/NL4Rq2S.png') no-repeat center bottom;
}
Problems:
When I hover, the sub menu disappears
The arrow icon does not appear.
Demo:
http://jsfiddle.net/y9Rk9/
The solution for the problem 2 is change the :before position to relative
The solution for the problem 1 is to make the menu height higher
ul > li ul.subs{
padding-top: 10px;
}
ul > li ul.subs::before{
content: " ";
display: block;
height: 10px;
width: 20px;
position: relative;
top: 0;
background: url('http://i.imgur.com/NL4Rq2S.png') no-repeat center bottom;
}
http://jsfiddle.net/y9Rk9/11/
Use ul > li ul.subs {padding-top: 10px;} instead margin-top: 10px;
A fiddle.

Slide down vertical menu without pushing horizontal from submenus

I have a menu list that is floated left for the main headings:
When a menu item with a submenu has a hover state, the submenu drops down, but pushes the menu to the right if it is wider than the main heading (spacing between 'shop' and 'about' -- as expected I suppose):
I'm trying to get the submenu to maintain its height (to push down the content below it on the page), but not push the items to the right over based on its width.
Using position: absolute just ignores the height of the submenu when its open.
Hoping there is something I'm missing.
Thanks for your help!
Try setting the width of the submenu to be that of the parent menu and then setting:
text-overflow: inherit;
overflow: visible;
On the submenu
I would position the sub menu dynamically and set its position to absolute. You will have to get the menu buttons left position and height and then set the sub menus left and its top to the height of its parent. Don't forget to use offset() to get the left position in case the menu is embedded in another container on the page.
I think that pushing the content downward can be done (only?) via javascript. Here is the updated fiddle and its source:
JS:
$(document).ready(function(){
$("li.drop").hover(function(){
$(this).addClass("hover");
$('#nav').css('height', $(this).children('ul:first').height()+30+'px');
}, function(){
$(this).removeClass("hover");
$('#nav').css('height', '');
});
});
CSS:
#nav > li {
position:relative;
display:inline;
margin:0px 15px;
padding:0;
}
#nav > li ul {
display: none;
position:absolute;
top:100%;
left:0;
min-width:200px;
}
#nav > li.hover ul {
display: block;
}
#content {
height: 50px;
width: 100%;
background: grey;
}
#nav ul {
list-style-type: none;
padding:0;
}

Categories