I do not want the navigation menu to be left-aligned but centered with space over the entire width. How do I do that? I use "Blogger".
Thank you for your answers!
Best regards,
Tini
Go to Theme > Customize > Advanced > Add CSS
Add this css code :
#PageList1 ul {
text-align: center;
}
#PageList1 ul li {
float: none;
display: inline-block;
margin-left: -4px;
}
.tabs-inner .widget li a {
border: 0;
}
Then Press Apply to Blog
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 want to make my navigation menu to be dropdown. I tried different ways, but nothing happend.
This is my HTML code:
<ul>
<li>Home</li>
<li>Geography</li>
<li>English</li>
<li class="icon">
☰
</li>
</ul>
And this is my CSS code:
ul {
padding: 15px;
margin: -10px;
overflow: hidden;
list-style-type: none;
background-color: #171B29;
}
li {
float: left;
}
li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
li a:hover {
background-color: #555;
}
li icon {
display: none;
}
#media screen and (max-width:680px) {
ul.topnav li:not(: first-child) {
display: none;
}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
#media screen and (max-width:680px) {
ul.topnav.responsive {
position: absolute;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
When I try to make a dropdown menu, the whole menu becomes very bad. I know that my code is very bad for reading but I will appreciate it if someone have a solution. Thank you in adva
You should try to find answer on http://www.w3schools.com/css/css_dropdowns.asp
Webpage have pretty decent content and its easy understandable.
Have you included the JavaScript too? You are specifying a toggle (myFunction) on click so you need the JavaScript too.
Of course you can just use HTML and CSS for dropdowns, as listed in the post above.
If your issue is that you want the <li> elements to be stacked vertically, you can solve this quite simply using flexbox. Additionally, if you were planning on effecting the "drop-down" effect with just HTML & CSS, you need to add a :hover pseudoclass on the top-level element from which the navigation menu derives. In the example I'm linking to below, I did so on the <ul> element. Alternatively, you'd use the mouseover event in JavaScript.
Additionally, note that the li icon CSS selector you used is not actually a valid selector. There is no actual icon tag in HTML, although many people use the <i> tag as a container for icons.
https://jsfiddle.net/IsenrichO/8t4jhvcs/20/
I'm a WordPress newbie so please be gentle.
Using Avanta theme on WordPress version 4.3.1.
This is the site:
http://goo.gl/YoDI9a
Trying to center the top navigation menu bar.
Used the following custom CSS code but didn't make a difference:
.fusion-main-menu > ul {
text-align: center !important;
float: none !important;
}
.fusion-main-menu > ul > li > a, .fusion-main-menu > ul > li {
float: none !important;
text-align: center !important;
display: inline-block !important;
}
.fusion-main-menu > ul ul {
text-align: left !important;
}
Any help appreciated.
On line 5518 of http://www.acornoak.co.uk/wp-content/themes/Avada/style.css?ver=3.8.6.1 get rid of the "float: right;" line under the .fusion-main-menu selector.
The problem is outside, in your style.css file change your .fusion-main-menu to this:
.fusion-main-menu {
position: relative;
z-index: 200;
}
My problem is that I've got a div at the top of my site that has a dropdown menu with a float to the left, the thing is that under that div where I want to have a header whenever I hover over the menu the header floats to the left as well.
I tried to do a clear div after the top div then on css use clear:both; but it didn't really help
Here's the JSfiddle:
http://jsfiddle.net/Safushi/XRNP5/
ul {
font-size: 16px;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px 15px 5px 15px;
background: #464646;
white-space: nowrap;
}
ul li a:hover {
background: #565656;
}
is some of the code for the menu (had to paste some code to be able to paste JSfiddle link).
It will be fixed by adding a
position: absolute;
to the ul that contains the submenu.
The child ul element needs to be absolutely positioned if you don't want it to effect the other elements.
Example Here
#top li > ul {
position:absolute;
width:100%;
}
And as Adrift mentions, you may also want to give the ul a width of 100%.
You got the layer of HTML file right,but the property "position" wrong.
Demo
Once a tag's settled position:absolute; ,it will only be positioned referring to its containing block.So you need to set #menu{postion:relative;} to let its parent-tag be the containing block.In fact,now the submenu is totally deleted from the normal flow,so it won't affect the styles of other tags.
Moreover,I highly recommend you to resist to use descendant selectors,which not only let your browser slower,and your code maintenance much more complex as well.
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!