I've got a nav bar with a few li tags that fall under each other when on a smaller screen size. I want the nav bar to remain the same height and scroll horizontally when on a smaller device screen but everything I'm trying is not working. Can someone shine a light on what is wrong here please!
HMTL:
<nav role="navigation" class="site-navigation main-navigation">
<div class="menu">
<ul>
<li class="page_item page-item-40">Buy</li>
<li class="page_item page-item-41">Rent</li>
<li class="page_item page-item-7">Sell</li>
<li class="page_item page-item-9 current_page_item">Valuations</li>
<li class="page_item page-item-15">Property Management</li>
<li class="page_item page-item-11">About Us</li>
<li class="page_item page-item-13">Contact Us</li>
</ul>
</div>
</nav>
CSS:
#media screen and (max-width : 480px){
div.menu ul {
display: inline-block;
max-height: 34px;
overflow: auto;
white-space: nowrap;
}
div.menu a {
display: inline-block;
text-align: center;
}
}
But this currently is not working.
horizontal scroll menu mobile
<style type="text/css">
#media screen and (max-width : 480px){
div.menu ul {
display: inline-block;
width: 85%;
display: inline-block;
padding-bottom:20px;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
div.menu li {
display: inline-block;
}
div.menu li a {
text-align: center;
}
}
</style>
<nav role="navigation" class="site-navigation main-navigation">
<div class="menu">
<ul>
<li class="page_item page-item-40">Buy</li>
<li class="page_item page-item-41">Rent</li>
<li class="page_item page-item-7">Sell</li>
<li class="page_item page-item-9 current_page_item">Valuations</li>
<li class="page_item page-item-15">Property Management</li>
<li class="page_item page-item-11">About Us</li>
<li class="page_item page-item-13">Contact Us</li>
</ul>
</div>
</nav>
Related
There are two codes below. The codes are for dropdown menu. Both codes are almost same but with a little difference. I have created a main list item for the main menu and given it classes. Then I have created a submenu and given it classes menu. The main heading is given class heading and has element in each of the element.
When I apply ":hover" on (anchor element) element combined with on submenu(dropdown element) the code does not work. While if I apply ":hover" on class heading(class of element) the drop down works.
I am sharing the code to clarify and be more specific.
The following code works for the drop down menu and has hover on heading class. I have commented in the code of css to clarify which part of the code I am referring.
.menu{
padding: 20px;
background: #d80000;
}
.mainmenu{
display: flex;
list-style: none;
}
.heading{
margin-right: 1px;
}
.mainmenu .heading a{
display: inline-block;
padding: 10px;
text-decoration: none;
background: #fff;
color: #d80000;
width: 80px;
text-align: center;
position: relative;
}
.submenu{
list-style: none;
margin-left: -40px;
display: none;
position: absolute;
}
.submenu a{
border-top: 3px solid #d80000;
width: 80px;
}
.heading a:hover{
background: #d80000;
color: #fff;
}
/* Here the hover and submenu element works to make the element display as block*/
.heading:hover .submenu{
display: block;
}
<html>
<head>
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="style5.css">
</head>
<body>
<div class="menu">
<ul class="mainmenu">
<li class="heading">Home
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">About
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">Services
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">Products
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">Contact
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Now I am going to post the code which is not working for the dropdown menu
In this the element is applied with hover along with submenu class.
.menu{
padding: 20px;
background: #d80000;
}
.mainmenu{
display: flex;
list-style: none;
}
.heading{
margin-right: 1px;
}
.mainmenu .heading a{
display: inline-block;
padding: 10px;
text-decoration: none;
background: #fff;
color: #d80000;
width: 80px;
text-align: center;
position: relative;
}
.submenu{
list-style: none;
margin-left: -40px;
display: none;
position: absolute;
}
.submenu a{
border-top: 3px solid #d80000;
width: 80px;
}
.heading a:hover{
background: #d80000;
color: #fff;
}
/* Here the hover on a and submenu element doesnot works to make the element display as block*/
.heading a:hover .submenu{
display: block;
}
<html>
<head>
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="style5.css">
</head>
<body>
<div class="menu">
<ul class="mainmenu">
<li class="heading">Home
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">About
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">Services
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">Products
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">Contact
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
So my question is why is the code working for the first code and not for the second code. The second code has hover on element while the first code has hover on class of element of the main menu.
.heading a:hover .submenu
^
There you have a descendant combinator.
<li class="heading">Home
<ul class="submenu">
Here the .submenu is a sibling of the a element, not a descendant.
You need one of the sibling combinators
You are not using a in the second one so use
.heading a:hover .submenu{
display: block;
}
here you are making the mistake :
.heading:hover .submenu{
display: block;
}
Use general sibling selector to select .submenu siblings of .heading a:hover. EG:
.heading a:hover ~ .submenu{
display: block;
}
However, now when you move your pointer down to the submenu itself you're no longer hovering on the a so the submenu will revert to display:none;, To resolve this we can insist that the .submenu themselves are display:block; when hovered. EG:
.heading .submenu:hover {
display: block;
}
Working demo:
.menu{
padding: 20px;
background: #d80000;
}
.mainmenu{
display: flex;
list-style: none;
}
.heading{
margin-right: 1px;
}
.mainmenu .heading a{
display: inline-block;
padding: 10px;
text-decoration: none;
background: #fff;
color: #d80000;
width: 80px;
text-align: center;
position: relative;
}
.submenu{
list-style: none;
margin-left: -40px;
display: none;
position: absolute;
}
.submenu a{
border-top: 3px solid #d80000;
width: 80px;
}
.heading a:hover{
background: #d80000;
color: #fff;
}
/* Use general sibling selector to select .submenu siblings of .heading a:hover*/
.heading a:hover ~ .submenu{
display: block;
}
/* however, now when you move your pointer down to the submenu itself you're no longer hovering on the a so the submenu will go back to display none; To resolve this we can insist that the submenu themselves are display block when hovered: */
.heading .submenu:hover {
display: block;
}
<html>
<head>
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="style5.css">
</head>
<body>
<div class="menu">
<ul class="mainmenu">
<li class="heading">Home
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">About
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">Services
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">Products
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
<li class="heading">Contact
<ul class="submenu">
<li class="items">A</li>
<li class="items">B</li>
<li class="items">C</li>
<li class="items">D</li>
<li class="items">E</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
We all have hard times with positioning absolute divs :S
In my case its horizontal sub-menus with this css:
ul.children{
display:none;
position:absolute;
}
ul.children li{
position:relative;
height:60px;
float:none;
}
li.page_item_has_children:hover > ul.children{
display:inline;
}
As you can see on the picture whole submenu moves to the left for 50% of the parents width...
I tried everything and created just a bigger mess xD
So if anyone can help me out with this I will be very thankful :)
HTML:
<li class="page_item page-item-2 page_item_has_children">
About
<ul class='children'>
<li class="page_item page-item-39">
About</li>
<li class="page_item page-item-41">
Contact us</li>
</ul>
</li>
I can't change html cause its wordpress theme :S
Try something like this:
ul {
list-style-type: none;
padding: 0;
}
.page_item_has_children {
position: relative;
}
ul.children {
display: none;
position: absolute;
top: 100%;
left: 0;
padding: 0;
min-width: 200px; /* or whatever makes sense */
}
ul.children li {
height: 60px;
}
.page_item_has_children:hover > ul.children {
display: block;
}
The important piece here is to make sure the 'page_item_has_children' element is relatively positioned and that the child 'ul' is absolutely positioned.
JS Fiddle
Update
ul.children {
display: none;
}
ul.children li {
position: relative;
height: 60px;
float: none;
}
li.page_item_has_children:hover > ul.children {
display: inline;
}
li {
float: left;
list-style-type: none;
width: 5em;
}
<ul>
<li class="page_item page-item-2 page_item_has_children">
About
<ul class='children'>
<li class="page_item page-item-39">
About</li>
<li class="page_item page-item-41">
Contact us</li>
</ul>
</li>
<li class="page_item page-item-2 page_item_has_children">
More info
<ul class='children'>
<li class="page_item page-item-39">
Item 1</li>
<li class="page_item page-item-41">
Item 2</li>
<li class="page_item page-item-41">
Item 3</li>
</ul>
</li>
</ul>
I need to make my list appear horizontal at the center of my web page.
This is my code:
.list-group {
clear: both;
display: inline-block;
content: "";
padding-right: 50px;
padding-left: 50px;
}
<div>
<ul class="list-group">
<li class="list-group-item">Home</li>
<li class="list-group-item">About Us</li>
<li class="list-group-item">Gallery</li>
<li class="list-group-item">Contact Us</li>
<li class="list-group-item">Students ePortal</li>
</ul>
</div>
I tried above code but it is not working.
Its display: table; that gets the job done.
#menu-outer {
height: 84px;
}
.table {
display: table; /* Allow the centering to work */
margin: 0 auto;
}
ul#list-group {
min-width: 696px;
list-style: none;
padding-top: 20px;
}
ul#list-group li {
display: inline;
}
<div id="menu-outer">
<div class="table">
<ul id="list-group">
<li class="list-group-item">Home</li>
<li class="list-group-item">About Us</li>
<li class="list-group-item">Gallery</li>
<li class="list-group-item">Contact Us</li>
<li class="list-group-item">Students ePortal</li>
</ul>
</div>
</div>
Try this:
.list-group {
list-style: none;
}
.list-group-item {
display: inline;
}
<div id="menu">
<ul class="list-group">
<li class="list-group-item">Home</li>
<li class="list-group-item">About Us</li>
<li class="list-group-item">Gallery</li>
<li class="list-group-item">Contact Us</li>
<li class="list-group-item">Students ePortal</li>
</ul>
</div>
Is this what you need ? please take a look at this
.menu {
float: left;
width: 100%;
}
.menu ul{
margin: 0;
padding: 0;
text-align:center;
}
.menu ul li {
list-style: none;
display: inline-block;
padding: 5px;
}
<div class="menu">
<ul>
<li class="list-group-item">Home</li>
<li class="list-group-item">About Us</li>
<li class="list-group-item">Gallery</li>
<li class="list-group-item">Contact Us</li>
<li class="list-group-item">Students ePortal</li>
</ul>
</div>
Use margin: 0 auto to center container that holds menu, use float or display:inline to show your menu items inline.
div {
width: 80%;
margin: 0 auto;
min-width: 720px;
}
ul {
list-style: none;
}
li {
float: left;
padding: 0 5%;
border: 1px solid black;
}
<div>
<ul class="list-group">
<li class="list-group-item">Home</li>
<li class="list-group-item">About Us</li>
<li class="list-group-item">Gallery</li>
<li class="list-group-item">Contact Us</li>
<li class="list-group-item">Students ePortal</li>
</ul>
</div>
.list-group {
text-align: center;
}
.list-group-item {
display: inline-block;
}
<div>
<ul class="list-group">
<li class="list-group-item">Home</li>
<li class="list-group-item">About Us</li>
<li class="list-group-item">Gallery</li>
<li class="list-group-item">Contact Us</li>
<li class="list-group-item">Students ePortal</li>
</ul>
</div>
Try this css:
.list-group {
text-align: center;
}
.list-group-item {
display: inline-block;
}
We all have hard times with positioning absolute divs :S
In my case its horizontal sub-menus with this css:
ul.children{
display:none;
position:absolute;
}
ul.children li{
position:relative;
height:60px;
float:none;
}
li.page_item_has_children:hover > ul.children{
display:inline;
}
As you can see on the picture whole submenu moves to the left for 50% of the parents width...
I tried everything and created just a bigger mess xD
So if anyone can help me out with this I will be very thankful :)
HTML:
<li class="page_item page-item-2 page_item_has_children">
About
<ul class='children'>
<li class="page_item page-item-39">
About</li>
<li class="page_item page-item-41">
Contact us</li>
</ul>
</li>
I can't change html cause its wordpress theme :S
Try something like this:
ul {
list-style-type: none;
padding: 0;
}
.page_item_has_children {
position: relative;
}
ul.children {
display: none;
position: absolute;
top: 100%;
left: 0;
padding: 0;
min-width: 200px; /* or whatever makes sense */
}
ul.children li {
height: 60px;
}
.page_item_has_children:hover > ul.children {
display: block;
}
The important piece here is to make sure the 'page_item_has_children' element is relatively positioned and that the child 'ul' is absolutely positioned.
JS Fiddle
Update
ul.children {
display: none;
}
ul.children li {
position: relative;
height: 60px;
float: none;
}
li.page_item_has_children:hover > ul.children {
display: inline;
}
li {
float: left;
list-style-type: none;
width: 5em;
}
<ul>
<li class="page_item page-item-2 page_item_has_children">
About
<ul class='children'>
<li class="page_item page-item-39">
About</li>
<li class="page_item page-item-41">
Contact us</li>
</ul>
</li>
<li class="page_item page-item-2 page_item_has_children">
More info
<ul class='children'>
<li class="page_item page-item-39">
Item 1</li>
<li class="page_item page-item-41">
Item 2</li>
<li class="page_item page-item-41">
Item 3</li>
</ul>
</li>
</ul>
I'm trying to get a ul horizontally centered within the space but no matter what I try it remains left aligned.
<nav>
<div id="home">
<ul id="topnav">
<li class="home">home</li>
<li class="products">products</li>
<li class="support">support</li>
<li class="wtb">where to buy</li>
<li class="webstore">web store</li>
<li class="contact">contact us</li>
<li class="facebook"><a href="#" target="_blank"
title="Hauppauge Computer Works">facebook</a></li>
</ul>
</div>
</nav>
CSS:
CSS file here
ul#topnav {
padding: 0px;
list-style: none;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
position: relative;
left: auto;
width: 123px;
}