My website has a scaling problem on the chrome browser in android on mobile. This does not happen in Firefox on mobile or in any desktop browser. When the navbar is selected and drops down, it scales the webpage. Note that the page is scaled differently depending on which dropdown has been selected. It seems as though the navbar has invisible content that is breaking frame when the dropdown behavior is engaged.
I have stitched together 4 screenshots of the issue.
Help with either a fix or a workaround would be much appreciated.
#NavigationBarList{
list-style-type:none;
padding:0;
}
li{
font-size:130%;
}
nav a{
display:block;
}
/* This customizes the presentation of the list elements (menu items) in the navbar. */
nav li{
display:block;
font-weight:bold;
font-size:200%;
color:#7F1717;
background-color:#9E939E;
width:25%;
text-align:center;
text-decoration:none;
text-transform:uppercase;
z-index:11;
-moz-box-shadow: inset 0 0 1px #000000;
-webkit-box-shadow: inset 0 0 1px #000000;
box-shadow: inset 0 0 1px #000000;
}
nav ul{
width:100%;
}
/* Hide the sub menu items. */
nav ul ul {
display:none;
}
nav ul ul ul {
display:none
}
/* When hovered over, the CSS menu will drop down. */
nav li:hover > ul {
text-align:center;
font-size:40%;
display:block;
}
/* Don't underline links in the list elements (menu items). */
ul a {
text-decoration:none;
color:#7F1717;
}
/* Change the background color of hovered list elements. This was both active and hover... */
nav li:hover{
background-color:#625C62;
}
/* This customizes the ul elements in the sub-menu. */
nav ul ul{
position:absolute;
padding:0;
width:100%
}
nav ul ul ul{
position: absolute;
width:400%;
left:100%;
top:0;
}
#totheleft{
left:-100%;
}
nav ul ul ul li{
text-align:center;
font-size:250%;
}
/* I think this refers to the dropdown navbar location and properties. */
nav ul ul li {
position:relative;
}
<nav>
<ul id="NavigationBarList">
<li style="float:left;">Events
<ul>
<li>Tournaments</li>
<li>Kid's Hour</li>
<li>Local Calendar</li>
</ul>
</li>
<li style="float:left;">Programs
<ul>
<li>Summer Camps</li>
<li>In Schools
<ul>
<li>After School</li>
<li>Registration</li>
</ul>
</li>
<li>Local Instructors</li>
</ul>
</li>
<li style="float:left;">Content
<ul>
<li>Posts</li>
<li>Games
</ul>
</li>
</li>
<li style="float:left;">Connect
<ul>
<li>Contact Us</li>
<li>Resources
<ul id="totheleft">
<li>Chess</li>
<li>Go</li>
<li>Xiangqi</li>
<li>Shogi</li>
<li>Backgammon</li>
</ul>
</li>
<li>About Us</li>
</ul>
</li>
</ul>
</nav>
Add this to the head section of all your pages.
<meta name="viewport" content="user-scalable=0">
From the google developers site
Without a viewport, mobile devices will render the page at a typical desktop screen width, scaled to fit the screen.
So when you visit the webpage on mobile, the view is actually zoomed out to fit all your content. When you touch your navbar, the browser also tries to zoom in. Setting user-scalable=0 prevents this from happening.
The downside is your users will no longer be able to scale the zoom on the website on mobile, but the only alternative would be to rewrite your website to use a fluid layout.
Your <ul>s that contain the dropdown items have width=100%. This means the width will be 100% of the first relatively positioned parent (which in this case is the <body>). This is causing an overflow on the x axis.
You could make the <ul>s 25% width and the <li>s inside 100%, instead of what you have now where the <li>s are 25%.
Giving you
/* This customizes the ul elements in the sub-menu. */
nav ul ul{
position:absolute;
padding:0;
width:25%;
}
and
/* I think this refers to the dropdown navbar location and properties. */
nav ul ul li {
position:relative;
width:100%;
}
I went to your site and checked it out real quick... I noticed you are using absolute positioning to position your content in the center of your page. I assume this is what is causing your issue.
I would look up a tutorial on how to create a repeating background image and use that instead of trying to use one image with no repeat. then you can center your content with margin: 0 auto.
I know its not a definite answer but I hope it nudges you in the right direction.
The workaround I came up with was to set overflow-x:hidden on my overlay. I had tried this previously on the body, but on Android overflow-x does not work on the body; it must be set for a container. There is presumably a related reason that this issue only arose on Android. This workaround works perfectly.
Related
I am working on a supposedly simple drop down menu using HTML and CSS, and have encountered an issue. After scouring google and the forums to no avail, figured it was time to ask. I am trying to get the drop down menu to line up with it's parent element.
I have experimented with a few different methods, so far the most hopeful seems to be setting the "left:" value to the necessary percentage.
This brings up another issue though:
Issue: when I set the left value, I end up with a bunch of blank space to the right of the item that I can't seem to get rid of. Can't get the width right.
Code located here: https://jsfiddle.net/c6mz3t08/5/
HTML
<div id="navbar-top">
<ul class="horizontal">
<li>Home</li>
<li>About
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</li>
<li>Header</li>
<li>Header</li>
<li>Header</li>
</ul>
CSS for dropdown
.horizontal li ul {
opacity:0;
visibility:hidden;
text-align:left;
position:absolute;
top:50px;
left:-38%; //end up with blank space on right?
}
.horizontal li ul li {
position:relative;
background-color:#BBB;
display:block;
width:100%;
}
It seems the alignment problem happens because the <ul> starts after the word "About" in the second <li>.
a.) for positioning adjust the leftparameter in .horizontal li ul (-39px seems to work well).
b.) for the width of the submenus adjust the width parameter in .horizontal li ul li (70px worked well here, but depends on the content)
Do not guess on the left. The reason it is pushed to the right is because the ul has by default some padding.
Setting the padding to 0 and the left to 0 will fix this.
The space on the right is added because you set the width to 100%. If you remove the width it will fit its container. But that might not be what you want because the text will wrap, it might be better to set white-space:nowrap on it.
.horizontal li ul {
opacity:0;
visibility:hidden;
text-align:left;
position:absolute;
top:50px;
padding:0;
left:0; //using the LEFT parameter to get it in to alignment--end up with "blank" space on right?
}
.horizontal li ul li {
position:relative;
background-color:#BBB;
display:block;
white-space:nowrap;
}
Updated demo at https://jsfiddle.net/c6mz3t08/6/
I'm trying to create a drop-down menu. I had it working for a minute.
My code is as follows:
<nav id="nav">
<ul>
<li class="subNav">Some Page1
<ul>
<li>Related Page1<li>
<li>Related Page2<li>
</ul>
<li>
</ul>
</nav>
My CSS is as follows:
#nav li.subNav ul{
display: none;
}
#nav li.subNav:hover ul{
display: block;
}
I have three CSS files that relate to this page. One is basically a web-kit for font, and the other two are bowlerplate.css and my custom file customFile.css. The tag <#nav li.subNav:hover ul> show up in customFile.css, and <#nav li.subNav ul> diplays in bout custom and boilerplate when I check computed styles.
There are two things I wish to fix; the submenu lines up horizontally (I need it to go vertical) and the submenu isn't hidden. I had to nest /li tag around the ul, so that took care of one problem (they're now aligned under the parent tag).
I also noticed that the height and width have changed on my parent li. I understand it expanding to accommodate the list items, but the increased height seems a little odd.
Here's my solution to the above problem
#nav li.subNav:hover ul li {
visibility: visible;
width: 171px;
padding: 0;
cursor: pointer;
float: none !important;
display: block !important;
}
My webpage has a list and I want the list to start just a few pixels down. The problem is, when I set margin: 0 0 0 0; it naturally does nothing, but setting margin: 1px 0 0 0 ; causes it to 'jump' down many pixels.
JSFIDDLE
<nav>
<ul>
<li>Layer This</li>
<li>And that</li>
<li>Ooooh</li>
</ul>
</nav>
CSS
nav {
background:#f0364f;
}
nav ul {
padding:1px 0 0 0; /* THIS IS THE FAULT. */
}
nav ul li {
list-style:none;
margin:20px 0;
background:#B8C5CD;
padding:5px;
}
So, in the CSS, if you change from
nav ul {
padding:1px 0 0 0; /* THIS IS THE FAULT. */
}
to
nav ul {
padding:0 0 0 0; /* THIS IS RENDERING CORRECTLY BUT, I WANT A PADDING! */
}
You will see the issue. When the padding is set to 0 it works as expected. Why does adding 1 pixel make it jump so far down?
EDIT Please note, although a fix is nice, I'm more interested in why this behaviour occurs (I'm sure I can find a hack easily enough, but I could not find any information into understanding the cause)
This is because when you have no padding on your <ul> the margin for your top list item collapses. When it has padding, the margin is acknowledged.
I'm assuming from your question that you don't want any margin before the first list item, you can remove any margin from the first item easily:
nav ul li:first-child{
margin-top:0;
}
JSFiddle
See Margin collapsing
You set margin for your li (child element). When you set padding for ul (parent element), you passed margin collapsing.
Set margin for second li element and next:
nav ul li + li {
margin-top: 20px;
}
jsFiddle Demo.
Rather than using :first-child, I would prefer doing something as mentioned below because :first-child may have cross browser compatibility issues.
<nav>
<ul>
<li class="first">Layer This</li>
<li>And that</li>
<li>Ooooh</li>
</ul>
</nav>
nav ul li.first{
margin-top:0;
}
The solution is basically same but targeting element based on class rather than :first-child may just help you prevent some cross browser issues.
Hope this helps :)
Try giving padding to first child instead of ul
nav ul li.test {
padding-top:1px;
}
nav ul {
padding:0 0 0 0;
}
<nav>
<ul>
<li class="test">Layer This</li>
<li>And that</li>
<li>Ooooh</li>
</ul>
</nav>
The title probably doesn't actually describe the issue properly. I want to create a menu for my website that is a vertical menu on the left side, and when you hover over an option with sub-options those sub-options pop out to the side (doesn't really matter at the moment). The issue I'm having is that when they pop out they push down all the other options, and I get this navigation bar that doesn't look good at all. If someone could help me fix this so I don't shove everything else out of the way even though they aren't overlapping, that would be appreciated.
The HTML I use.
<ul id="nav">
<li>Work</li>
<li>Imaging
<ul>
<li>Photoshop
<ul>
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li>Illustrator</li>
</ul>
</li>
<li>Home</li>
The CSS I use.
ul {
list-style-type:none;
margin:0;
padding:0;
}
a {
display:block;
width:60px;
}
#nav ul {
display: none;
}
#nav li:hover > ul {
display: block;
position: relative;
float: left;
}
Thanks in advance if someone can help me with this.
that is because your document is having all the elements in a line and will always show them one after the other!
So my advice for you would be to just use
position: absolute;
This way you can align the elements over the document without interefering the current document style and element alignment!
For more: https://developer.mozilla.org/en-US/docs/Web/CSS/position
I would position the ul inside your li absolute.
position:absolute;
When you do this the element will hover above the li-parent. When you try a little with positive and negative margin you will be able to put the hover element next to it parent.
It will be something like this:
#nav li:hover > ul {
display: block;
position: absolute;
float: left;
margin-left:60px;
}
Hi I have some HTML and CSS that creates a <ul> on my screen. The items are links to other pages on the site. I want the items in the list to be black normally, light grey if hovered over, and light grey if it's the screen the user is on.
Here is the HTML for the <ul> on the home screen. On the home screen, the list item "Home" should be light grey, while all the others should be black unless hovered over.
<div id="navmenu">
<ul>
<li><a class="selected" href="index.html">Home</a></li>
<li>Research</li>
<li>CV</li>
<li>Links</li>
</ul>
</div>
My CSS sheet is:
#navmenu {
margin: auto;
}
#navmenu ul {
text-align:center;
}
#navmenu ul li {
display:inline;
padding-left:25px;
padding-right:25px;
}
#navmenu ul li a {
color:#000000;
}
#navmenu ul li a:hover {
color:#F2F2F2;
}
#navmenu ul li a:selected {
color:#F2F2F2;
}
The links are black, which is good. They also turn light grey when I hover over them, which is great. But whenever I select one of the items to go to the page, I can't get the link that I'm currently on to be light grey. This also applies to the home page - whenever I go to the first page, the "Home" item is in black.
Can anyone see what I'm doing wrong here? Any help is appreciated.
Do you mean to do this:
#navmenu ul li a.selected {
color:#F2F2F2;
}
See: http://jsfiddle.net/audetwebdesign/nSgDf/
There is currently no :selected pseudo-class in CSS2 or CSS3.
Apply the .selected class to denote the current page that the user is visiting.
Reference: http://www.w3.org/TR/css3-selectors/#pseudo-classes