I've already received some valuable informations in answer related to my previous question but I still have the problem with media queries.
Previous question:
Replace menu item with icon (Prestashop theme)
I'm working with this demo:
http://livedemo00.template-help.com/prestashop_53577
The problem is connected with the look on mobile devices. Home icon is hidden. How to make similar effect on max-width: 767 px etc.? Classes are not the same in superfish-modified.css and I'm a little bit confused with that.
CSS Files which were changed:
blocktopmenu.css http://pastebin.com/PzyhH9x6
This code was added:
.stickUpTop.isStuck .sf-menu li:first-child a:before {
content: "\f015";
font-family: "FontAwesome";
display: inline-block;
font-size: 33px;
line-height: 55px;
color: black;
text-indent: 0;
width: 0;
left: 0;
}
.stickUpTop.isStuck .sf-menu li ul li a:before {
content: none!important;
}
.stickUpTop.isStuck .sf-menu li:first-child a:after{
width: 0;
}
superfish-modified.css:
http://pastebin.com/f2JG4hnT
This code was added:
.sf-menu li:first-child a {
text-indent: -9999em;
white-space: nowrap;
}
.sf-menu li:first-child a:before{
content: "\f015";
font-family: "FontAwesome";
display: inline-block;
font-size: 33px;
line-height: 70px;
color: black;
text-indent: 0;
width: auto;
left: 0;
}
.sf-menu li ul li a:before{
content:none!important;
}
You should add this:
.sf-menu li:first-child a:before {
position: absolute;
}
and remove on line 92 of superfished-modified.css the line
content: "";
because that is what remove you icon on smaller resolutions
Related
I'd like to use the text animation found on the Janji.com homepage (Shopify store), near the bottom above the footer.
The text says:
Equipping you for the [ journey ] ahead.
And "journey" is a list item that cycles between several other words.
I'm unable to find out how to do this online in a way similar to this. Ideally it'd be javascript or something lighter than copy-pasting a hundred lines of CSS into my store. Is there some sort of library I'm not aware of?
.prop-wrapper.vert-scroll {
color: #0064a5;
font-size: 2.5em;
font-weight: 700;
padding: 3%;
}
.tickerv-wrap {
background: 0 0;
box-sizing: content-box;
height: 55px;
overflow: hidden;
padding: 0;
margin-bottom: 12.5px;
display: inline-block;
vertical-align: middle;
}
.tickerv-wrap ul {
padding: 0;
margin: 0;
list-style-type: none;
animation-name: tickerv;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(1,0,0.5,0);
}
.tickerv-wrap ul li {
font-size: 1em;
line-height: 50px;
color: #0064a5;
font-weight: 700;
margin: 0 0;
}
#keyframes tickerv{
0%{margin-top:0}25%{margin-top:-50px}50%{margin-top:-100px}75%{margin-top:-150px}100%{margin-top:0}}.tickerv-wrap ul{padding:0;margin:0;list-style-type:none;animation-name:tickerv;animation-duration:10s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(1,0,0.5,0)}.tickerv-wrap ul:hover{animation-play-state:paused}
After checking the code on the website,
I found this done using the CSS code and you can use the bellow code and implement it on any website.
<div class="prop-wrapper vert-scroll" style="max-width: 1500px; margin:auto;">
Equipping you for the [
<div class="tickerv-wrap"><ul>
<li>path</li>
<li>trail</li>
<li>road</li>
<li>journey</li>
</ul></div>
] ahead
</div>
I've been looking through the slick-theme.css and I can't figure out how to hide the numbers inserted after the dots.
Can anyone enlighten me?
The official solution is this according to slick.css
.slick-dots li button {
font-size: 0;
}
The best way would it be to create your own dots on a pseudo element, since the dots you see come from the list-item.
That's how slick is doing it for their own theme:
.slick-dots li {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:before {
content: '•';
font-size: 22px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
text-align: center;
opacity: .25;
color: black;
}
Adding this worked for me
.slick-dots li button {
display: none;
}
Numbers can be removed by using the text-indent property.
.slick-dots li button {
text-indent: -9999px;
}
You can remove text of the button with javascript like this:
var dotNums = document.querySelectorAll(".slick-dots button");
function removeText(item) {
item.innerHTML = ""; // or put the text you need inside quotes
}
dotNums.forEach(removeText);
This is what I did to remove the numbers from the dots.
solution 1
setTimeout(function(){ const dots = document.querySelectorAll('.slick-dots li button') dots.forEach(dot=>dot.innerHTML="") },1000)
.slick-dots li button doesn't happen to be part of the DOM when the page loads. it's is added after the slider start sliding.
Recommended solution
.slick-dots li button {
text-indent:-1000
}
you can use jquery to remove the dots
Docs
$('.your-slider').slick({
dots: false
});
i got a "little" bug on my website. Here is the code im using:
product.tpl
{else}
href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}"
data-fancybox-group="other-views"
class="fancybox{if $image.id_image == $cover.id_image} shown{/if}"
global.css
.fancybox-skin {
background: #f4f5f7 !important; }
.fancybox-skin .fancybox-close {
width: 28px;
height: 28px;
background: none;
font-size: 28px;
line-height: 28px;
color: #333333;
text-align: center;
background: #f4f5f7!important;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px; }
.fancybox-skin .fancybox-close:hover {
color: #515151; }
.fancybox-skin .fancybox-close:after {
content: "\f057";
font-family: "FontAwesome"; }
Here is a Link to a product.
If you enlarge the picture by clicking on it, and hover to one of the sites and than jump to one of the other pictures you can see that the background is moving. In Internet Explorer it is working fine.
Now:
/* 1920x1200 ----------- */
#media only screen
and (min-width : 1681px) {
/* Styles */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 1.42857;
background: #f4f5f7 url('http://evoxity.net/themes/default-bootstrap/img/background/1920x1200.jpg');
margin: 0 ;
background-repeat: no-repeat scroll;
-moz-background-size:cover;
overflow: auto;
background-position:center 0;
}
}
My CSS UL menu doesn't seem to want to centre, any ideas? I have pasted the code below for your review, I am quite new to CSS so your help is greatly appreciated :-)
The only way I have been able to centre it is by fixing the width and using the html centre tags but I need the menu to be at 100% for expansion and I need to to automatically centre.
The CSS
#menu{
width:100%;
margin: 0;
padding: 5px 0 0 0;
list-style: none;
background-color:#333333;
text-align:center;
}
#menu li{
float: left;
padding: 0 0 5px 0;
position: relative;
list-style:none;
margin:auto;
}
#menu ul{
list-style:none;
display:inline;
margin: 0;
padding: 0;
text-align: center;
}
#menu a{
float: left;
height: 15px;
padding: 0 25px;
color:#FFF;
text-transform: uppercase;
font: 10px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 0px 0 #000;
}
#menu li:hover > a{
color:#F90;
font: bold 10px/25px Arial, Helvetica;
}
*html #menu li a:hover{ /* IE6 */
color: #F06;
}
#menu li:hover > ul{
display: block;
}
Thanks again :-)
Provide width to your menu and use margin: auto;
#menu{
width:300px; <--------Here
margin: 0 auto; <-----Here
padding: 5px 0 0 0;
list-style: none;
background-color:#333333;
text-align:center;
}
Moreover why are you doing this?
#menu li:hover > ul{
display: block;
}
And also this
#menu a{
float: left;
....
}
Update: just read all the styles your cascade looks pretty messed up, use the following
#menu { /* I Assume this ID is applied to <ul> element */
width:/*Whatever you want to define*/;
margin: 0 auto; <---Change Here
padding: 5px 0 0 0;
list-style-type: none; <---Change Here
background-color:#333333;
text-align:center;
}
#menu li{
float: left; <---You don't need this
padding: 0 0 5px 0;
position: relative; <---You don't need this too
list-style:none; <---You don't need this too
margin:auto; <---You don't need this too
}
/* Take out this entirely from here */
#menu ul{
list-style:none;
display:inline;
margin: 0;
padding: 0;
text-align: center;
}
/* till here */
#menu a{
float: left; <---You don't need this
height: 15px;
padding: 0 25px;
color:#FFF;
text-transform: uppercase;
font: 10px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 0px 0 #000;
}
#menu li:hover > a{
color:#F90;
font: bold 10px/25px Arial, Helvetica;
}
*html #menu li a:hover{ /* IE6 */
color: #F06;
}
#menu li:hover > ul{
display: block;
}
And if you want your links inside the menu too be centered simply use this
HTML
<ul id="#menu">
<li></li>
</ul>
CSS
#menu li {
text-align: center;
}
Putting
text-align:center;
in the ul means that text in the ul is centered. You should add:
margin-left:auto;
margin-right:auto;
to the ul. This will work for all major browsers save IE. To work in IE you need to make sure that a tag containing ul has
text-align:center;
in it.
I have looked through a tonne of posts which have similar issues, but I just can't figure out my problem. Please could someone help, it is driving me insane.
The below code is for my Site Navigation. I would like the background to be an image rather than just a background colour. I would also like the background image to change on hover. As our Meerkat friends would say...Simples!....but not for me.
<div class="sub-menu" id="sub-menu">
<ul>
<li><a class="on" href="#" title=" You Are Here ">» Overview</a></li>
<li>Endorsements</li>
<li>The Detail</li>
<li>Funding</li>
<li>Apply Online</li>
<li><a class="end" href="graduates-terms.html" title=" Terms & Conditions ">Terms</a></li>
</ul>
</div>
div.sub-menu { position: relative; width: 920px; height: 40px; padding: 0; margin: 0; border-top: solid 1px #FFFFFF; }
#sub-menu ul { list-style: none; padding: 0; margin: 0; }
#sub-menu li { float: left; margin: 0; }
#sub-menu li a { padding: 0 30px; width: 93px; height: 40px; line-height: 36px; text-align: center; float: left; display: block; color: #FFFFFF; text-decoration: none; background-color: #555555; border-right: solid 1px #858585; }
#sub-menu li a:hover { color: #050505; background-color: #f3b607; }
#sub-menu li a.on { background-color: #555555; color: #FBAF5D; cursor: default; }
#sub-menu li a.end { width: 89px; }
#sub-menu li a.end-on { text-align: center; float: left; display: block; color: #FBAF5D; text-decoration: none; border-right: none; }
/* Hide from IE5-Mac \*/
#sub-menu li a{ float: none }
/* End hide */
#sub-menu { font-weight: normal; font-size: 14px; font-family: verdana; }
Thank you, I really appreciate your help.
In your question subject, you said you wish to put background image to "li" tag, but as per the code you have shown, you have given background to "a" tag.
You can put background image and color both together to any of the tag "li" and "a"
Eg.
background: #00ff00 url('smiley.gif') no-repeat fixed center;
For details refer:
http://www.w3schools.com/cssref/css3_pr_background.asp
If you want to put hover effect as well, implement it on anchor "a" tag. Because old browsers like ie6 doesn't have inbuilt support for li hover effect.
Use following pattern.
a{
background: url('img1') no-repeat fixed center;
}
a:hover{
background: url('img2') no-repeat fixed center;
}
Hope it helps you.