I want to create a distance between menu items
This is the CSS code:
.menu-item a img
{
border:none;
box-shadow:none;
vertical-align:middle;
width:auto;
padding-left:20px;
}
This is the site
http://avocat.dac-proiect.ro/wp
I managed to create a distance between elements but when put arrow hover over the menu ... the effect is elsewhere
What should I do to function properly?
Thanks in advance!
Use
#menu-meniu > li{padding-left: 20px}
or
#menu-meniu li.menu-item-object-page{padding-left: 20px}
You can use padding or margin for ul li, in example:
.menu li {
padding-right: 20px;
}
use margin in li .menu-item like
.menu-item {
margin-right: 22px;
}
Related
So, I've tried to implement a two column menu into my wordpress, using this CSS code which I’ve found on the internet:
.sub-menu-columns .sub-menu{
display:inline-block;
width:500px !important;
background-color:#FFFFFF;
}
.sub-menu-columns .sub-menu li{
width:50% !important;
}
.sub-menu-columns .sub-menu li a:hover{
color:#FFFFFF;
}
.sub-menu-columns .sub-menu li:nth-child(even){
float:right;
border-left:2px;
border-color: #404040;
}
I added .sub-menu-columns as a CSS class for the top-level-menu “Products” at which only!! the two column sub menu should be seen.
I managed to get this to work. Now is the problem, since the menu is bigger in width, that I need to move the sub-menu container to the left. I also managed to solve this issue with this code:
#mainnav ul li ul{
left:-400px;
}
Now is the only thing, that all other Menus with submenus are moved to the left too (as you can see with “Contact/Support”)
My logical approach would be to edit the previous code to:
#mainnav .sub-menu-columns .sub-menu ul li ul{
left:-400px;
}
In addition, adding border-left doesnt bring any border up.
Here is how it looks like:
And this is how it should look like:
My current custom CSS script for the menu (with double colums, moving to the left and the Bootstrap Arrow-up back to the righ which is the ::before):
.sub-menu-columns .sub-menu{
display:inline-block;
width:500px !important;
background-color:#FFFFFF;
}
.sub-menu-columns .sub-menu li{
width:50% !important;
}
.sub-menu-columns .sub-menu li a:hover{
color:#FFFFFF;
}
.sub-menu-columns .sub-menu li:nth-child(even){
float:right;
}
#mainnav ul li a{
border-left:2px;
border-color: #404040;
}
#mainnav ul li ul{
left:-400px;
border-left:2px;
border-color: #404040;
}
#mainnav ul li ul::before{
left:450px;
}
However that is not working.
Any ideas maybe? Since I've heard many people use lately jsFiddle for helping out, I'm not sure if I've done it right, but this is what I could provide for you: https://jsfiddle.net/mve1wdfd/
Website: https://xs-sol.com/
Thank you for your help!
Update: I think the main issue is that I'm unable to combine the id=mainnav with other classes and ul's, il's a:hover's and so on.
I am getting a problem with my project where our client has used a logo image inside the menu's ul li. He has used a class with li where the logo is placed but I cant use the class with it; I also do not want to use :nth-child because in future we may add a new menu element. I currently have an empty anchor inside the logo li. Is it possible in the CSS to select this anchor which is empty. Please help me.
Thanks in advance
Client Site: http://www.kangaroopartners.com/about/
My Site: http://kangaroopartners-2.hs-sites.com/test1
Demo http://jsfiddle.net/thwkav0e/
CSS and HTML:
ul {
display:block;
width:100%;
text-align:center;
list-style: none;
margin:0;
padding:0;
}
ul li {
display:inline-block;
padding: 10px;
}
ul li:nth-child(4), ul li:last-child {
background:red;
width:50px;
}
<ul>
<li>Hello1</li>
<li>Hello2</li>
<li>Hello3</li>
<li></li>
<li>Hello4</li>
<li></li>
</ul>
:empty selector should be what you are looking for.
ul li a:empty {
background:red;
width:50px;
display: inline-block;
height: 10px;
}
http://jsfiddle.net/thwkav0e/1/
This is my full code: https://jsfiddle.net/dv6gxtoh/2/
I want the dropdown box to expand and be the full width of it's content (so it doesn't have to drop things down a line) but I also don't want it to stretch the main dropdown button to the same width.
The best example I can give is something a bit like this:
http://i.stack.imgur.com/w3ym8.png
This is the CSS I am using:
* {
margin: 0;
padding: 0;
}
.click-nav ul {
position:relative;
display: inline-block;
}
.click-nav ul li {
position: relative;
list-style:none;
cursor:pointer;
display:inline-block;
}
.click-nav ul li ul {
position:absolute;
left:0;
right:0;
}
.click-nav ul .clicker {
position:relative;
color:black;
}
.click-nav ul .clicker:hover, .click-nav ul .active {
background:#196F9A;
}
.click-nav ul li a {
display:block;
padding:8px 10px;
background:#FFF;
color:#333;
text-decoration:none;
}
.click-nav ul li a:hover {
background:#F2F2F2;
}
/* Fallbacks */
.click-nav .no-js ul {
display:none;
}
.click-nav .no-js:hover ul {
display:block;
}
The closest I could get it to remove position:relative; from .click-nav ul which does the trick, except the dropdown menu doesn't sit under the button which opened it.
Any help would be appreciated.
Seems to me white-space : nowrap is what you need, i.e
.click-nav ul li a {
display:block;
padding:8px 10px;
background:#FFF;
color:#333;
text-decoration:none;
white-space: nowrap;
}
forked fiddle -> http://jsfiddle.net/j5ckepbm/
Check the shared fiddle..
you need to make few changes to your css, like adding and width/min-width to your dropdown.
white-space:nowrap
Click to see the fiddle, commented lines are mine changes
You may need to add one more class with a fixed width to get it done.
.click-nav ul li ul li {
width: 150px;
}
Here is a fiddle
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!