I'm developing a responsive website and I'm having a little problem with the menu. I'll show the images below to be easier to understand what is happening ...
The menu on a desktop is shown as follows:
And in a mobile device it should be shown as follows:
And currently my code is rendered as follows:
I wish the sub menu was loaded under the menu when rendered on a mobile device, any suggestions how to do it?
Here is my html code:
<ul id="menu">
<li>Home</li>
<li>Portfolio</li>
<li>
<ul id="sub-menu">
<li>Todas as categorias</li>
<li>Logo</li>
<li>Campanha</li>
<li>Print</li>
<li>Digital</li>
<li>Indoor</li>
<li>Projetos Especiais</li>
</ul>
</li>
<li>Trabalhe Conosco</li>
<li>Quem Somos</li>
<li>Prêmios</li>
<li><a class="select" href="#">Contato</a></li>
</ul>
The Css code for desktop:
#menu{
position: relative;
width: 200px;
margin: 0px 10px 0 0;
float: right;
background: rgba(255,255,255,0);
text-align: left;
text-transform:uppercase;
}
#menu li{
list-style: none;
}
#menu li a{
list-style: none;
font-family: 'swiss921_btregular';
text-decoration: none;
font-size: 22px;
line-height: 32px;
color: #231f20;
}
#menu li a:hover{
color: #ed1d24;
}
#menu li #sub-menu li a{
margin: 0 0 0 20px;
list-style: none;
font-size: 17px;
line-height: 34px;
font-family: 'swiss921_btregular';
}
#menu li a.select{
color: #ed1d24;
}
And the actual Css code for mobile:
#media screen and (min-width: 0px) and (max-width: 768px){
#menu{
width: 100%;
margin: 50px auto;
float: none;
text-align: center;
}
#menu li{
display: inline-block;
width: auto;
margin: 0 13px;
}
#menu li #sub-menu li a{
margin: 0;
}
}
I have fiddle it: http://jsfiddle.net/r3zeB/
That's basically it, hope someone can help me and sorry for my bad english. Thank you.
You can always place another copy of your sub menu where you want it to be on mobile. Then use a display:none; for it to be shown only when you want it and to hide the other one.
This is maybe not the proper way to do it but it would definitely works
Related
I'm trying to position a website title (div) to the left of my navigation bar. I thought of creating another
<li><a>
element and put that as the website title, but I don't want it to have some of the propertise like font family and hover.
This is currently what I have:
and this is what I would like to achieve:
So in summary I would like to add a div to put my website title to the left of the navigation buttons.
#nav {
width: 100%;
height: 50px;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #3D3D3D;
}
#nav ul {
list-style: none;
width: 1000px;
margin: 0 auto;
padding: 0;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
height: 50px;
text-decoration: none;
font-family: 'Quicksand', sans-serif;
font-size: 20px;
color: #FFFFFF;
}
#nav li a:hover {
color: #FF4343;
background-color: #FFFFFF;
}
<div id="nav">
<ul>
<li>Prev 1
</li>
<li>Prev 1
</li>
<li>Prev 1
</li>
</ul>
</div>
I think you've got too much in your CSS. Just changing the ul to:
display:inline;
and then setting some line-height does the trick.
See this fiddle: https://jsfiddle.net/x20mkx1n/5/ where I've taken out much of your CSS.
My navigation bar is centered, but when the window is smaller, it just goes onto the next line, rather than getting smaller to fit the size of the window, and I don't know how to resolve it. It's got drop down elements on it. I'll also be looking at turning this to a vertical list when viewed on mobile devices, but nowhere near doing media queries yet.
Here's my HTML:
<nav id="page-navigation">
<ul>
<li>Home</li>
<ul class="top-menu">
<li>Photography
<ul class="sub-menu">
<li>BMC Himley Mini Show 2015</li>
<li>Kinver Snow</li>
<li>"Mini Runs" Collection</li>
<li>Hofner Bass</li>
<li>Nature</li>
<li>Haynes Motor Museum</li>
<li>Miscellaneous</li>
<li>Classic Mini</li>
</ul>
</li>
<li>Graphic Design
<ul class="sub-menu">
<li>"Story Bag" Artwork</li>
<li>Business Cards</li>
<li>Logo Design</li>
<li>"The Mexican Job"</li>
<li>Magazine Covers</li>
<li>WPAP Artwork</li>
<li>Lyrics Posters</li>
</ul>
</li>
<li>3D Modelling</li>
</ul>
<li>About</li>
<li>Recognition</li>
</ul>
</nav>
And here's my CSS:
/*navigation*/
#page-navigation
{
width: 60%;
height: 53px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}
#page-navigation ul li
{
color: white;
list-style: none;
background-color: darkslategray;
width: 9em;
float: left;
}
li
{
position: relative;
}
li.title
{
display: none;
}
li a
{
display: block;
color: white;
line-height: 1.3em;
padding: 1em;
text-align: center;
}
li a:link
{
text-decoration: none;
}
li a:visited
{
text-decoration: none;
color: white;
}
li a:hover, .top-menu > li:hover > a
{
background-color: rgb(48,48,48);
}
li a:active
{
background-color: dimgray;
}
ul.sub-menu
{
width: auto;
height: auto;
position: absolute;
left: -9000em;
overflow: hidden;
}
ul.sub-menu li
{
clear: left;
float: none;
margin-left: -2.5em;
z-index: 1000;
}
.top-menu li:hover ul
{
left: 0;
}
ul.sub-menu li a
{
height: auto;
border-bottom: 1px solid gray;
padding: .4em 1em;
background-color: dimgray;
padding-top: 1em;
padding-bottom: 1em;
}
ul.sub-menu li:last-child a
{
border-bottom: none;
}
ul.sub-menu li a:hover
{
background-color: darkslategray;
}
ul.sub-menu li a:active
{
background-color: gray;
}
Thank you.
Your menu is specified as a variable width of 60%:
#page-navigation
{
width: 60%;
...
}
This will cause the width of the bar to scale with the window, and affect the position of the elements within it. To prevent this, specify a static width, such as:
#page-navigation
{
width: 1000px;
...
}
I just insert a line of code and I think it looks pretty nice right now :)
ul.top-menu{
padding: 0;
}
If you resize the screen there is in front of the navigation (next line) a small space and this resolves the problem.
See the resolution also on jsfiddle.
Answer:
Because of the way your HTML document is structured, it's not possible for you to get the intended effect for the following reason:
You have an unordered list nested directly in another unordered list which is (1) not considered correct (see this discussion); but more importantly, while it looks like your navigation has 6 top level items, you really only have 4. So no matter what CSS you apply to it, it won't work.
Recommendations:
Fix the structure of your HTML document first by using the proper classes only on the top navigation items and properly nest your navigation items.*
I would advise restructuring you information architecture to contain less navigation items on the menu. For example, the recognition would make sense to go in your About page. And if this is a portfolio type website, collapsing your Photography, Graphic Design, and 3D Modeling into Projects would work well. And if you're concerned with the separation, that will happen within the page as a sub-navigation.
If you are set on keeping the navigation structure, it's advisable to either collapse your menu into a select menu or hamburger menu on mobile devices since having a large chunk someone's mobile device screen consumed by your navigation is not a good experience for your user. On top of it, you have to consider that users can't "hover" on mobile devices and the size of those dropdowns would be difficult to navigate at best.
*Solution: Demo
HTML (Fixed):
<nav id="page-navigation">
<ul>
<li>Home</li>
<li class="top-menu">Photography
<ul class="sub-menu">
<li>BMC Himley Mini Show 2015</li>
<li>Kinver Snow</li>
<li>"Mini Runs" Collection</li>
<li>Hofner Bass</li>
<li>Nature</li>
<li>Haynes Motor Museum</li>
<li>Miscellaneous</li>
<li>Classic Mini</li>
</ul>
</li>
<li class="top-menu">Graphic Design
<ul class="sub-menu">
<li>"Story Bag" Artwork</li>
<li>Business Cards</li>
<li>Logo Design</li>
<li>"The Mexican Job"</li>
<li>Magazine Covers</li>
<li>WPAP Artwork</li>
<li>Lyrics Posters</li>
</ul>
</li>
<li>3D Modelling</li>
<li>About</li>
<li>Recognition</li>
</ul>
</nav>
CSS (Fixed and Updated):
/*navigation*/
#page-navigation {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}
#page-navigation ul {
text-align: center;
}
#page-navigation ul li {
color: white;
list-style: none;
background-color: darkslategray;
width: 9em;
/* float: left removes any possibility of it centering */
display: inline-block;
}
li {
position: relative;
}
li.title {
display: none;
}
li a {
display: block;
color: white;
line-height: 1.3em;
padding: 1em;
text-align: center;
}
li a:link {
text-decoration: none;
}
li a:visited {
text-decoration: none;
color: white;
}
li a:hover,
.top-menu > li:hover > a {
background-color: rgb(48, 48, 48);
}
li a:active {
background-color: dimgray;
}
ul.sub-menu {
width: auto;
height: auto;
position: absolute;
left: -9000em;
overflow: hidden;
}
ul.sub-menu li {
clear: left;
float: none;
margin-left: -2.5em;
z-index: 1000;
}
.top-menu:hover ul {
left: 0;
}
ul.sub-menu li a {
height: auto;
border-bottom: 1px solid gray;
padding: .4em 1em;
background-color: dimgray;
padding-top: 1em;
padding-bottom: 1em;
}
ul.sub-menu li:last-child a {
border-bottom: none;
}
ul.sub-menu li a:hover {
background-color: darkslategray;
}
ul.sub-menu li a:active {
background-color: gray;
}
ul.top-menu {
padding: 0;
}
There are still some minor stylings to adjust, but this should get you what you wanted based on your question.
Doing some basic html/css. I was making a rudimentary navbar with floated links. After getting it working I was stuck with this problem, and so far have not come to a solution.
My links have these dots in them. As the picture shows.
My code is simple:
HTML
<div id="nav-wrapper">
<div id="navbar">
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</div>
</div>
and the CSS
#nav-wrapper {
background-color: black;
height: 40px;
width: 100%;
border-top: 2px solid gray;
border-radius: 0 0 5px 5px;
}
#navbar {
}
ul#nav li {
float: left;
font-family: sans-serif;
font-size: 18px;
text-decoration: none;
}
ul#nav * a {
width: 25px;
margin: 0 10px 10px 0;
}
My question is what is causing these dots? And why don't they appear if I add more words/links to the list or I erase all but one item? It's odd. I must be missing something extremely embarrassing because this just seems odd.
You want to use the code - list-style: none;
so your code will look like
ul#nav li {
float: left;
font-family: sans-serif;
font-size: 18px;
text-decoration: none;
list-style: none;
}
Add this style:
list-style-type: none;
To this selector:
ul#nav li
Modify your declaration for ul#nav li to include this property
list-style:none;
http://jsfiddle.net/bcDDk/
I'm building a nav menu with sub-menus with just CSS (media queries too) and html.
It works fine visualy, but the problem is:
On the mobile browser, When I click in any sub-menu, it won't work, sometimes it just redirect to the first menu address and sometimes it don't even redirect. On the computer browser it works fine too.
Here is my code:
#nav{
position: relative;
height: 100%;
}
#nav ul{
margin: 0px;
padding: 0px;
height: 100%;
}
#nav ul li{
list-style: none;
float: left;
height: 100%;
border-right: black solid 2px;
text-align: center;
padding: 0px 15px 0px 15px;
}
#nav ul li:hover{
background: #47350e;
}
#nav ul li a{
position: relative;
font-family: 'Oswald';
font-size: 18px;
color: white;
text-transform: uppercase;
text-decoration: none;
top: 15px;
}
#nav ul li a:hover{
}
#nav ul li .children li{
border: 0px;
}
#nav ul li .children li a{
font-size: 13px;
top: 5px;
font-weight: normal;
}
#nav ul li .children li a:hover{
text-decoration: underline;
}
#nav ul li .children{
display: none;
position: absolute;
left: 0px;
top: 46px;
height: 30px;
width: 100%;
background: #47350e;
padding-left: 120px;
z-index: 5;
}
#nav ul li:hover .children{
display: block;
}
and HTML
<div id="nav">
<ul id="nav-items">
<li>
<a href=#>option 1</a>
</li>
<li>
<a href=#>option 2</a>
<ul class="children">
<li>
<a href=#>option 3</a>
</li>
<li>
<a href=#>option 4</a>
</li>
</ul>
</li>
</ul>
</div>
For mobile Version u can use Select menu.
<div id="mobile_menu">
<select>
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
</div>
CSS is
In normal css
#mobile_menu{display:none;}
For mobile
#media only screen and (min-width: 320px) and (max-width: 479px) {
#mobile_menu{display:block;}
#nav{display:none;}
}
Possibly your #nav ul li a { rule is creating the mess.
position: relative;
top: 15px;
is working for both the levels, i.e. option 1 and option 3
Check if this is the issue. If do not resolve please share the link to your code.
Good evening,
I would like to have a navigation bar which is centralised to the screen without gaps between the button. I realised the gaps can be closed by having a 'float:left'. however, this would result in the navigation bar being flushed to the left. without 'float:left', there will be gaps yet centralised. would appreciate if someone could help me out. thank you!
my css codes are as follow:
#nav {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
width: 100%;
text-align: center;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
}
#nav li {
margin: 0px;
display: inline;
}
#nav li a {
padding: 10px;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
background-color: #086ba9;
float: left
}
#nav li a:hover {
color: #FFFFFF;
background-color: #35af3b;
}
following is my partial html code:
<div id="nav">
<ul>
<li>Home</li>
<li>Crawler</li>
<li>Visual Analytics</li>
</ul>
</div>
Cheers,
ZH
Here is working code:
http://jsfiddle.net/surendraVsingh/vU4C8/1/
Changes to be done in CSS:
#nav ul {
list-style-type: none;
padding: 0;
display:inline-block; /* Add This*/
}
Note: display:inline-block is added so that ul will only take width according to its li's unlike other block elements which take 100% width.
i don't know if this approach is "healthy" or not but it did the trick for me
#nav ul a{margin:0 -2px;}