Given a menu created by a Wordpress Theme "Twenty Eleven" with HTML tags UL and LI, how might we go about centering the LI items. The client would like to have the individual items centered when the display is narrowed and the menu consumes two lines.
Single line menu
Split line menu, not-yet centered
CSS for #access UL
#access ul {
font-size: 13px;
list-style: none outside none;
margin: 0px 0px 0px -0.8125em;
padding-left: 0px;
}
CSS for LI
#access li {
float: left;
position: relative;
}
Add text-align: center; and width: 100%; in #access ul
Switch float: left; to display: inline; in #access li. You'll possibly need to stablish paddings, a width or a height for a better viewing.
Related
I'm trying to figure out with my drop-down list within my nav is not displaying. I
am also trying to understand how to i would render the drop-down list as a class and how it would be specified in the CSS to not get it confused with any of my of unordered lists. Can someone please help and possibly add a class to the dropdown list so i know how to display it?
Here is my code in Jfiddle:
https://jsfiddle.net/CheckLife/rzxxb2kb/4/
In your css you have:
/*Dropdown Nav */
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
position: absolute;
}
The problem here is that you're setting each individual "li" element to display none, so you're hiding each individual list item. If you show/hide the whole unordered list, then your elements will appear. Additionally, you probably want to remove position:absolute so that they stack vertically
/*Dropdown Nav */
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
}
EDIT:
In order to address the issue of the list pushing all content down, I recommend not using an ul. Instead you could put each a tag in a div and do the following:
HTML:
<li onmouseover="newText()">Players
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
CSS:
.dropdown-content {
display: none;
position: absolute;
// The below was copied from your other css
background-color: #3b63d3;
width: 90px;
text-align: center;
border-right: 1px groove #141e38;
}
li:hover .dropdown-content {
display: block;
}
https://jsfiddle.net/rzxxb2kb/5/
Its the position: absolute; on ul li:hover ul li change it to position: relative;
/*Dropdown Nav */
ul li ul li{
display: none;
}
ul li:hover ul li {
display: block;
position: relative;
}
.clear {
clear: both;
}
W3Schools shows how to create Nav bars with drop down functionality
https://www.w3schools.com/css/css_dropdowns.asp
I'm still relatively new to coding, so this is probably an easy fix.
I have set up menu with 5 menu items, and submenu items under two of the primary menu items. If I line up the first submenu with its menu item, the second one is too far right. If I line up the second submenu with its menu item, the first one is too far right. Is there a way to make both submenus line up under their respective menu items?
Here is the HTML:
<ul id="menu">
<li>Home</li>
<li>About Me
<ul>
<li>Fairfax Psychological Associates</li>
<li>Credentials</li>
</ul></li>
<li>Publications
<ul>
<li>The Wisdom of the Five Messengers</li>
<li>Other Publications</li>
</ul></li>
<li>Location</li>
<li>Strategic Interactions</li>
And this is the CSS:
#menu {
width: 950px;
height:35px;
font-size: 20px;
font-family: cambria, Georgia, sans-serif;
font-weight: bold;
text-align: center;
background-color: #FFF;
border-radius: 0px;
margin-top: -175px;
margin-left: 25px;
}
#menu li {
display: inline;
padding: 10px;
}
#menu a {
text-decoration: none;
color: #2B297F;
padding: 10px 10px 10px 10px;
}
#menu a:hover {
color: #2B297F;
background-color: #999;
}
#menu li ul
{font-size:15px;
margin-left:-160px;
margin-top:25px;
position:absolute;
text-align:left;
display:none;}
#menu li:hover ul
{display:inline-block;
}
#menu li li
{list-style:none; display:list-item;}
#menu li li a
{color:#2B297F; text-decoration:none;white-space:nowrap;
}
#menu li li a:hover
{color:#2B297F; background-color: #999 text-decoration:none;}
The site is at http://kerryaltmantest.info if you want to see what I mean about the submenu. Thank you!
There are a few changes in css that need to be made:
#menu li ul {
font-size: 15px;
/* margin-left: -160px; REMOVE */
/* margin-top: 25px; REMOVE */
position: absolute;
text-align: left;
top: 30px; /* add this */
left: 0; /* add this */
padding: 0 /* add this */
display: none;
}
#menu li {
display: inline;
padding: 10px;
position: relative; /* add this */
}
The biggest reason that the ul is not positioning properly is because the li it is contained in did not have a position style set. When this happens, absolutely-positioned elements are positioned according to the first ancestor that has a position type set. Additionally, that was apparently not coming into effect because no positioning rules (top/left/bottom/right) were set in the ul. Adding these two things and resetting the margins/padding fixed the issue (css is directly editable/debuggable in chrome's debugger).
https://developer.mozilla.org/en-US/docs/Web/CSS/position:
Absolute positioning
Elements that are positioned relatively are still considered to be in
the normal flow of elements in the document. In contrast, an element
that is positioned absolutely is taken out of the flow and thus takes
up no space when placing other elements. The absolutely positioned
element is positioned relative to nearest positioned ancestor. If a
positioned ancestor doesn't exist, the initial container is used.
Chrome debugging information: https://developer.chrome.com/devtools/index
I was working on this site and added the header menu with drop downs. The third menu item WINDOWS SUPPORT sub menus are aligned to the left while others are aligned to to the center of the dropdown.I have edited the css to
.sub-menu li a {
text-align: center;
}
but the dropdown area is aligned to the right compared to others.Please help me in making it align correct.Thanks!!
i checked your site. just add these two classes in your css. it will resolve the problem.
#mainmenu .menu-item-292 ul
{
left:-15px;
}
#mainmenu .menu-item-292 li
{
padding-left:15px !important;
}
watch your css file and remove this 2 lines
#mainmenu .menu-item-291 a{margin-right:15px;}
#mainmenu .menu-item-292 a{margin-left:-16px;}
If you want to make more space use padding and border-box:box-sizing
You have
#mainmenu .menu-item-292 a {
margin-left: -16px;
}
It's pulling over both the "Windows Support" anchor, and all anchors below it.
Try this
Add margin-left: 0; css for given anchor tags into your style.css file I guess at line no. 383
#header #mainmenu ul.children li a, #header #mainmenu .sub-menu li a {
color: #FFFFFF;
font-family: 'menu-font' !important;
font-size: 13px !important;
padding: 5px 20px;
text-align: left;
text-transform: uppercase;
margin-left: 0;
}
I hope this solves your problem!
I'm working on front-end of an intranet website.
The problem I have is with to do with the list compatibility. What I want to do is to style the list items, for example, instead of having bullets, I would like to have arrows. I have inserted the arrows, but it displays differently on Firefox compared with Chrome.
On Firefox it displays the bullet point on the corner, but on Chrome it displays inline with the link text which is what I'm looking for.
Here is the CSS for the list and arrow:
.jt-menu .item-280 li li {
color: #FFFFFF;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 16px;
margin: 1px 0 0 1px;
text-align: left;
width: 172px;
list-style: disc inside url("../../../../images/barrow.png");
}
Add this to your CSS:
.jt-menu > li > ul ul li {
width: 240px !important;
}
.jt-menu > li > ul ul a {
display: inline-block;
}
Try adding more left-margin and setting line-height as tall as your image.
I have this HTML code:
<nav id="menu">
<ul>
<li>
Item1
Item1
</li>
<li>
Item2
Item2
</li>
</ul>
</nav>
Demo page
As you can notice, it's a menu with 2 links for each item. The menu is horizontal, and the aim is to hide the "alt" link when the item is not hovered and to show it when it is hovered.
Each <li> element is therefore a box with a specific height (34px) and each link has a height of 34px as well, so that the "alt" link is below the main link, and is hidden.
When the item is hovered, a negative top margin of 34px is applied to the main link, making the "alt" one appear.
But when "hovering out" the top margin of 0 is not really applied back by Google Chrome as you can notice on the demo page I made. Just hover several times on the links and you will notice that elements are not put back to their correct positions.
How can I solve that? I need to keep 2 links (main and "alt") for more complex reasons, the demo being simplified.
For your information, here is the CSS:
nav#menu {
background-color: #e9e9e9;
}
nav#menu > ul {
margin: 0;
height: 39px;
display: block;
list-style-type: none;
}
nav#menu > ul > li {
display: inline-block;
height: 34px;
overflow: hidden;
width: 200px;
}
nav#menu > ul > li > a {
display: block;
height: 34px;
line-height: 34px;
}
nav#menu > ul > li > a:first-child {
margin-top: 0;
}
nav#menu > ul > li:hover > a:first-child {
margin-top: -34px;
}
nav#menu > ul > li > a.alt {
color: white;
background-color: #8d8d8d;
}
Sorry for all the comments. I was trying to get it to work and just thinking out loud. Here is the solution you are looking for...
You need to change two of the styles.
/* add the overflow: hidden; to the end of this tag set */
nav#menu > ul { .... overflow: hidden; }
/* replace the inline-block with float:left;*/
nav#menu > ul > li { float:left; height: 34px; overflow: hidden; width: 200px; }
Here is the working link jsFiddle