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;
}
Related
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
I'm struggling with positioning on a pure css driven drop down menu: My left hand side options are working fine - and this code is based on code i found online - It does the job ok.
I'm trying to make my far right hand menu drop down and NOT be clipped off/screen - I believe i will need to use a combination of relative positioning and float right but have tried lots of combinations without the desired effect.
I've put my code into a JSfiddle to show a live example (in-fact it's pretty much identical to what i'm working on) - I have added a batch of css resets to the top to make jsfiddle behave properly (on my live site i'm using an external css reset).
JS Fiddle: http://jsfiddle.net/g7Lk7/1/
.pit_toolbar_ul ul{
background:#fff;
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
list-style-type:none;
margin: 0;
}
Any recommendations on how to get the far right drop down to align up against the right edge of the screen would be appreciated.
Thanks for your time!
You should use right: 0 instead of left: 0 for the right menu item. You can fix it adding this styles:
.pit_toolbar_ul li:hover ul.rightside {
left: auto;
right: 0;
}
.pit_toolbar_ul li:hover ul.rightside li {
margin-right: 0;
}
and add rightside class to corresponding ul.
http://jsfiddle.net/g7Lk7/2/
.pit_toolbar_ul li:hover ul.alignRight li
{
position:relative;
left:-30px;
}
Add this class to your style sheet this may help you. I have positioned your dropdown li.
I'm trying to edit the default menu for Wordpress TwentyTwelve theme. So far I have made the sub-menus horizontal but they don't align the same in Firefox than Chrome.
In Ff it looks as I want, but in Chrome, the sub menu align with the Menu item previously clicked, NOT to the far left of the main menu.
basically, I want a horizontal two-lines menu. I can' t get the "position:"" properly.
Here's how it looks in both browsers:
Here's how it looks in both browser:
Chrome:
http://imageshack.us/photo/my-images/248/cssmenuchrome.jpg/
I can't post more links because I need 10 reputation but the second image (menu in Firefox) in there too.
And here's a fiddle of my code so far:
http://jsfiddle.net/ZN9my/
.main-navigation li ul ul {
top: 0;
left: 100%;
}
.main-navigation .menu-item li {
display: none;
margin-right: 14px !important;
}
Your problem, as you say, is that both browsers seem to be dealing with your position:absolute; differently. position:absolute should be calculated in regards to the most recent parent element with an explicitly set position, which means that it's actually Chrome which is interpreting it right.
In this case, you've given .main-navigation li a position:relative, which means that Chrome is positioning the submenu, li.sub-menu, relative to it. If you remove position-relative from the CSS for .main-navigation li and add it to ul#menu-main, then li.sub-menu will be positioned relative to the main navigation ul, and should behave as you want it to across browsers. You'll probably want to change .main-navigation li ul's top from 100% to something like 37px so it still sits in the right place.
I've made the changes to your jsfiddle as well: http://jsfiddle.net/ZN9my/1/.
Here I've got a jquery menu which is working perfectly. But Ive given it a fixed width of 400px and so what happens is that if I add more than certain number of links to the main ul they will flow in the next line and that is absolutely not desired.
I tried overflow:hidden and line-height to somehow overcome the issue BUT NO RESULT anyway.
Here is the menu : http://jsfiddle.net/b5Wdc/
As you see there, the red color link flows on the next line and that is the problem.
What do should I write to hide the overflown links in this situation?
Thank you all anyway.
From our conversation in the comments on the question, it seems that your menu is completely fixed and any "extra" items should always be hidden and there is no dynamic display or wrapping required. So you can just use CSS to hide all menu items that you know won't fit in. Since a menu item has a width of 99px and the menu is 400px you know you will only ever show 4 items. This purely CSS will hide the rest:
.HeadMenu #nav > li:nth-child(n+5) {
display:none;
}
However it requires a minimum of IE8 for the nth-child CSS selector support.
Since you mentioned jQuery in the question you could accomplish the same in JavaScript if you need to support IE8 with:
$('.HeadMenu #nav > li:nth-child(n+5)').hide()
Alternatively, keep the CSS solution (as it's cleaner) and use selectivizr to bring nth-child selector support to IE8.
if you change your styles to the following i think it may work:
.HeadMenu .HeadMenuMain
{
display:block;
position:relative;
margin:0;
width:400px;
padding:0;
direction:rtl;
height:40px;
white-space:nowrap; //will make elements stay on one row
}
.HeadMenu .HeadMenuMain li
{
display:inline-block; //will make elements stay on one row with the nowrap
list-style:none;
position:relative;
}
http://jsfiddle.net/b5Wdc/2
Adding an overflow:hidden to the navigation menu will do the trick:
.HeadMenu #nav {
overflow: hidden;
}
I've found solutions for this problem the old fashioned way but I've got a responsive theme Im tweaking for a personal blog and wanted to figure out if its possible to have a nav menu with a centered image and the menu items float to the right and left of it without the need for using two seperate nav menus.
This is what I have now, all li items are in one menu. Im still trying to figure out how I would center the UL in this responsive design and have it scale accordingly. Ive seen examples of how to do it with 2 nav menus but was wondering if this is possible with a responsive design on one menu as I cant find a good example or tutorial.
I do have a temp version of the site here View It Here
What if you just put the centered image IN the middle of the ul? Give it its own li class and just style it accordingly.
Kinda like this http://jsfiddle.net/qWYGR/
the CSS isnt showing up in my jsfiddle. add this
ul {
display:inline;
list-style-type:none;
}
li{
float:left;
}
li a {
float:left;
padding:5px;
height:35px;
width:50px;
background:red;
}
.logo img {
height:100%;
}