So I'm making a minor button and navigation kit in terms of learning more HTML and CSS responsiveness. Navigation is my weak point and I've come to my first problem that I can't get my head around.
https://jsfiddle.net/ku0wezws/3
If you scroll to the bottom of the CSS, you'll find the subnav implementation and what I'm trying to achieve is to align all the content in the center when you hover over About. You'll notice that it has just aligned one after the other side by side. My aim is to center all of that normally, going all the way down. Like this: http://www.w3schools.com/howto/howto_js_dropdown.asp
Am I being really stupid? I think I am. What should I adjust in the CSS to make this happen?
Thank you.
Edit:
Edited the JSFiddle
Add this to prevent the li items of that submenu to float next to each other:
.jkit-subnav li {
float:none;
}
https://jsfiddle.net/yhkuv138/
Just clear the float from .jkit-nav-inverse ul li ul li.
Add below code to the end of your CSS.
.jkit-nav-inverse ul li ul li{
clear: both;
}
Updated fiddle
Related
I am working on a responsive ribbon navigation bar, that I created using ionicons (http://ionicons.com).
Everything looks great! The only problem is when I resize the browser to a smaller size the right part of the ribbon is causing scrollbars to appear. You can see what I'm working on here: https://jsfiddle.net/gyrndofr/
I tried to use overflow-x:hidden, but then everything except the navigation bar disappears. To see the overflow-x:hidden just uncomment line 7 in the fiddle css.
I'm trying to keep the functionality, but just hide the overflow, which is why I tried overflow-x:hidden, but maybe I'm just adding that to the wrong element.
I took a closer look and made some adjustments, hopefully this helps someone else :-)
https://jsfiddle.net/66fwcz71/
Basically, I applied a max-width to both the #nav container and the #nav ul, the trick is...instead of having a #nav:before - #nav:after and a #nav ul:before - #nav ul:after both, the shadow and the ribbon have to be part of the ul, so I left the ribbon as the #nav:before - #nav:after, then created a .left and .right div with my shadow...that way the ribbon is the #nav element and the .left - .right is the shadow.
Thanks,
Josh
I can't figure out why my site is displaying my menu icon all the way to the right, with all this extra blank scroll space, when viewed on a mobile device. Does anyone have any idea how I can remove all the extra space and move my menu bar so that it's centered?
http://mobiletest.me/iphone_5_emulator/#u=http://beeandcompany.com
In order to make it center, First thing you need to do is remove display:block from .main-navigation.So your .main-navigation will look like this :
.main-navigation{
text-align:center !important;
line-height:1.5;
}
Second thing you need to do is, there is float:left given to .main-navigation li so please remove it and add display:inline-block.So your .main-navigation li look like this :
.main-navigation li{
position:relative;
display:inline-block;
}
So your menu will look like this :
Rohil is correct with the div that has been added above the nav tag so you need to remove that, also you have another issue with the menu not actually doing anything when you click it. You need to add a css rule for the toggled state of the mobile nav like the following:
.main-navigation.toggled ul {
display: block!important;
}
EDITED
So basically I was able to create the drop down shown above in html css, but when i converted it into a wordpress theme the drop down didnt work anymore,can someone help me out? Thank!
`homeabout
work
by client
by category
clients
contact
`
I did it here using a pseudo element that is positioned absolutely to the left of the li element. This then butts it up right up to the border on the parent UL element. In order to get the line on the bottom li to align with the bottom of the border I had to bump the li's down with a top position property, so I added some margin so it wont overlap with anything underneath it.
ul{
padding:16px 8px 0px 0px;
border-left:1px solid #000;
}
li{
display:block;
padding-left:12px;
position:relative;
top:9px;
height:20px;
}
Other then using images, this is probably the easiest way involving the least amount of css.
http://jsfiddle.net/PfChj/4/
EDIT
Here's the modified fiddle. I pretty much redid your css because it was a little hard for me to follow with all those sub ul and li children. Sometimes it's better to use a class for readibility, so you're going to have to redo your styles a bit. The sub menu is positioned in the center of the top li which has a set width now. If you don't want it at the center and what your top li's to flex with the link widths, you can modify this.
http://jsfiddle.net/FYnS4/2/
I'm trying to create a "grid" of "blocks" that when hovered over will reveal some text in a div beneath it. In the example I've got everything how I'd like it but- is there a way to make it work in the arrangement I have it in?
What I'd like is for only the bottom div to push down (like the bottom-left one in the example) when the one above it is "expanded". But obviously I'm not getting something right since it creates a giant gap and it's not showing the animation either.
The way the bottom div reacts in the second column is not what I'm going for, though.
Any ideas?
Thanks, appreciate it!
http://jsfiddle.net/nbFkZ/
Through your comments, i think i understood your question finally:
What I've done:
I've moved the second and third li into a new UL-elements.
And let both UL elements float to the left.
The HTML is a bit to much to post here, so i just post the CSS:
ul.things {
list-style: none;
float: left;
width: 240px;
}
ul.things li {
display: inline-block;
/*float:left;*/
margin:15px;
}
HTML, CSS & Live Demo: http://jsfiddle.net/nbFkZ/4/
Hope it helps :)
http://jsfiddle.net/kvKfr/
Shows the menu as I've got it working. Does anyone know how to keep the LI element in the parent UL from expanding? I want the sub menu to show to the right (as it is) with out causing the parent LI to change sizes. Is this possible?
The basic idea on these is to make the position absolute:
http://jsfiddle.net/kvKfr/1/
Set
ul.myMenu li > ul
to be
position:absolute
Demo at http://jsfiddle.net/gaby/kvKfr/2/