I've put an image in a superfish menu to separate list items. It seems to be jacking up the alignment on the menu. Any clue as to why and how to fix?
My code is super simple
#menu .sf-menu li:not(:first-child):before {
content: url('../images/menubord.png');
}
You can see it here:
Menu
Thanks for any assistance!
S
You can position the image in relation to the list item:
#menu .sf-menu li:not(:first-child):before {
content: url('../images/menubord.png');
position: absolute;
top: 5px;
}
If you do not want to make it with position, then use following it will work
#menu .sf-menu li:not(:first-child):before {
content: url(../images/menubord.png);
float: left;
margin-top: 5px;
}
Related
I want to get data from server and displaying it using ng-repeat in jade drop down view. The content is getting displayed but not one by one instead it is displaying side ways. I have spent a lot of time but I couldn't find any solution.
Please help me with this.
JADE CODE
li.dropdown.btn.btn-primary.col-10(align='center',style='margin:10px;',ng-repeat='category in vm.categories', ng-if=" category.categoryType !== 'ADDON'")
span
| {{category.categoryName}}
span.caret
ul.dropdown-menu.dropdown-toggle(data-toggle='dropdown',ng-repeat='product in vm.products',ng-if='category.categoryName===product.productView.category.categoryName')
li(role='menuitem',ui-sref="app.order.list" , ng-click='vm.show(product)')
a {{product.productView.productName}}
CSS CODE
#import "../../../../stylesheets/fy_config";
$imgPath: '../../../imgs';
a {color: black;margin: 5px; text-decoration: none;}
.dropdown-menu li:hover{
visibility: visible;
height:auto;
}
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}
.dropdown-menu .sub-menu {
align: center;
position: relative;
top: 0;
float:none;
}
Here on my website http://www.collectifsaga.com/X/wordpress/fr/home-fr/ , I have a menu on hover.
In the menu, there is some filters (architecture, news …) to reorganize the grid (displaying the posts).
The problem is when I click on a filter, I would like the menu disappear. It's a small thing, but to have a clean webpage when I select a filter I would like to have only the logo at the top and the the grid with a few elements and not the menu.
Of course the menu disappear when the mouse is out of it, but I would like it disappears right after clicking on a filter.
Do you have an idea how to make it ?
Here is my CSS:
#nav, #nav ul {
align-text: left;
list-style: none;
max-height: fit-content;
}
#nav a {
display: inline-block;
}
#nav a:hover {
display: inline-block;
}
#nav li {
float: left;
}
#nav li ul {
position: absolute;
left: -999em;
}
#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
And the same on mobile devices
Thanks a lot for your help : )
Here Is the link of the page on which I am working.
In the CONSULTANT section there is a list. I want to make the bullets size smaller.
I have done CSS:
.career ul li span {
font-size: 18px;
}
.career ul li{
font-size: 10px !important;
}
Please help me to make bullets size smaller.
Thanks
There is no <!DOCTYPE html> in your HTML page. so that you're not able to decrease Bullet size
#trainoasis is right, decreasing the font-fize for li works. Tried with ChromeDeveloper tools, but this CSS should do the trick.
.career ul li {
font-size: 0.5em;
}
You can use :before to create your own bullet and have it's own font-size
.career ul li {
list-style: none;
}
.career ul li:before {
content: '■';
vertical-align: middle;
display: inline-block;
margin-top: -3px;
font-size: 12px;
margin-right: 4px;
}
Fiddle
To reduce the size of bullet list, we can use before pseudo element.
For the list we have to give
ul{
list-style: none;
}
And then using pseudo element, we can create bullet as per our needed size and content
ul li:before {
content: ".";
position: absolute;
}
You can style the positions by giving top,bottom,left, right values.
If you have any queries please check,
http://frontendsupport.blogspot.com/2018/05/reduce-bullet-size-in-list.html
Code was taken from the above site.
I have a strange trouble with css.
Take a look at the first element of the menù (Home) of this site (is a beta): http://nightly.gamempire.it/
I want to remove the "Home" word from the first element (and leave only the house icon).
I tried removing the word, but it break the style of the element.
If I set to the property
body > nav a.master { width: 30px; overflow: hidden; }
it break the style of all the menù.
What can I do?
Thanks
body > nav li {
display: inline-block;
vertical-align: middle;
}
body > nav a.master {
display: block;
height: 36px;
font-size: 0;
padding: 0;
}
Another option would be to do this:
nav li:first-child a {text-indent: -9999px;}
or also
nav li a.master {text-indent: -9999px;}
What would be the best way to insert a small image after each list element? I tried it with a pseudo class but something is not right...
ul li a:after {
display: block;
width: 3px;
height: 5px;
background: url ('../images/small_triangle.png') transparent no-repeat;
}
Thanks for any help!
The easier way to do it is just:
ul li:after {
content: url('../images/small_triangle.png');
}
Try this:
ul li a:after {
display: block;
content: "";
width: 3px;
height: 5px;
background: transparent url('../images/small_triangle.png') no-repeat;
}
You need the content: ""; declaration to give your generated element content, even if that content is "nothing".
Also, I fixed the syntax/ordering of your background declaration.
For IE8 support, the "content" property cannot be empty.
To get around this I've done the following :
.ul li:after {
content:"icon";
text-indent:-999em;
display:block;
width:32px;
height:32px;
background:url(../img/icons/spritesheet.png) 0 -620px no-repeat;
margin:5% 0 0 45%;
}
Note : This works with image sprites too
I think your problem is that the :after psuedo-element requires the content: property set inside it. You need to tell it to insert something. You could even just have it insert the image directly:
ul li:after {
content: url('../images/small_triangle.png');
}
ul li + li:before
{
content:url(imgs/separator.gif);
}
My solution to do this:
li span.show::after{
content: url("/sites/default/files/new5.gif");
padding-left: 5px;
}