Вот стили:
//@import "bourbon"
@import "vars"
@import "fonts"
body
font-size: 16px
position: relative
line-height: 1.6
overflow-x: hidden
font-family: MyriadSetProText, sans-serif
header
background-color: #333
padding: 0
.dropdown
display: inline-block
text-align: left
a.dropdown-toggle
color: #999
font-size: 15px
margin-top: 0
padding: 36px 0 0
display: block
&:hover, &:active, &:focus
color: #ffffff
text-decoration: none
a, button
outline: none!important
.dropdown-menu
border-radius: 0
border: none
margin-top: 8px
right: -10px
> li
> a
padding: 5px 20px
&:focus, &:hover
background-color: $accent2
color: #FFF
.form-control
&:focus
box-shadow: none
.logo
margin-top: 17px
display: block
#search
width: 100%
padding: 28px 0
.form-control
padding: 5px 16px
height: 35px
border: none
radius: 0
background-color: #444
color: #ffffff
font:
style: italic
size: 13px
color: #fff
transition: background-color .25s ease, box-shadow .25s ease
box-shadow: transparent 0 0 0 1px inset
&:focus, &:hover
background-color: #555555
box-shadow: #777 0 0 0 1px inset
.input-group-btn
position: absolute
right: 26px
.btn
padding: 9px 10px
border: none
radius: 0
background-color: transparent
color: #999
font-size: 13px
.nav-wrapper
padding: 0
.navbar-collapse.in
overflow-y: unset
.list-group
padding-top: 35px
.list-group-item
padding: 11px 15px
border-color: #EDEDED
transition: background .25s ease, color .25s ease, text-indent .25s ease, border-color .25s ease
border:
bottom: 1px transparent solid
top: 1px transparent solid
&:first-child
border-radius: 0
border-top: 1px #EDEDED solid
&:last-child
border-radius: 0
border-bottom: 1px #EDEDED solid
a.list-group-item:focus, a.list-group-item:hover, button.list-group-item:focus, button.list-group-item:hover
background-color: $accent2
border-color: $accent2
color: #fff
text-indent: 10px
.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover
background-color: darken($accent2, 5%)
border-color: darken($accent2, 5%)
text-indent: 10px
.top-menu
border-bottom: 1px solid #ededed
.cart-wrapper
.dropdown-menu
padding: 15px
width: 660px
.table-striped
.text-right
width: 100px
a
color: #333333
.navbar
margin-bottom: 0
font-size: 16px
&-nav
> li
> a
padding-top: 14px
padding-bottom: 12px
&:focus, &:hover
text-decoration: underline
background: none
#cart button + .dropdown-menu
margin-top: 1px
.btn-danger
border-radius: 15em
width: 20px
height: 20px
line-height: 0
padding: 0
text-align: center
font-size: 12px
background-color: #d9534f
li:first-child:last-child p
margin: 0
#cart
button
background-color: $accent3
color: #ffffff
border-radius: 0
padding-top: 14px
padding-bottom: 15px
border: none
font-family: MyriadSetProThin, sans-serif
font-size: 16px
text-align: left
.cart-wrapper
padding: 0 15px
.toggle-top-text
text-transform: uppercase
display: inline-block
color: #333
font-family: MyriadSetProSemiBold, sans-serif
padding: 15px 0
padding-left: 15px
.fa-shopping-cart
padding-right: 4px
#content
h3
text-align: center
font-family: MyriadSetProThin, sans-serif
font-size: 30px
margin-bottom: 20px
p
img
max-width: 100%
.common-home
#content
.owl-carousel
margin-bottom: 60px
h3
text-align: center
font-size: 32px
font-family: MyriadSetProThin, sans-serif
margin:
bottom: 40px
top: 35px
.product-layout
.price
font-size: 18px
font-family: MyriadSetProThin, sans-serif
.price-old
font-size: 15px
text-decoration: line-through
> .product-thumb
transition: box-shadow .25s ease
padding: 40px 0 0
text-align: center
margin-bottom: 40px
.image
padding: 0 25px
> a
display: block
img
display: inline-block
&:hover
box-shadow: #EDEDED 0 0 0 1px inset
.caption
padding: 0 25px
p
display: none
&.price
display: block
margin-bottom: 20px
.price-tax
display: none
.rating
display: none
h4
margin-top: 25px
margin-bottom: 10px
a
color: #333
font-size: 22px
font-family: MyriadSetProThin, sans-serif
&:hover, &:focus
text-decoration: none
border-bottom: #333 1px solid
.button-group
> *
display: none
&:first-child
display: block
&.toclick
display: none
.button-group
margin-top: 15px
.hidden-sm
display: block !important
button, .button
&.toclick
font-size: 14px
color: #777
background-color: #f5f1f3
padding: 11px 0
&:hover, &:focus
background-color: darken(#f5f1f3, 3%)
color: #444
border: none
background-color: $accent2
color: #fff
width: 100%
padding: 8px 0
font-size: 18px
transition: background-color .25s ease
&:hover, &:focus
background-color: lighten($accent2, 5%)
text-decoration: none
&:active
background-color: darken($accent2, 5%)
.fa
display: none
#content
.row
.product-recomend
.price
font-size: 18px
font-family: MyriadSetProThin, sans-serif
.price-old
font-size: 15px
text-decoration: line-through
> .product-thumb
transition: box-shadow .25s ease
padding: 40px 0 0
text-align: center
margin-bottom: 40px
.image
padding: 0 25px
> a
display: block
img
display: inline-block
.image
&:hover
box-shadow: #EDEDED 0 0 0 1px inset
.caption
padding: 0 25px
p
display: none
&.price
display: block
margin-bottom: 20px
.price-tax
display: none
.rating
display: none
h4
margin-top: 25px
margin-bottom: 10px
a
color: #333
font-size: 22px
font-family: MyriadSetProThin, sans-serif
&:hover, &:focus
text-decoration: none
border-bottom: #333 1px solid
.button-group
> *
display: none
&:first-child
display: block
&.toclick
display: none
.button-group
margin-top: 15px
.hidden-sm
display: block !important
button, .button
&.toclick
font-size: 14px
color: #777
background-color: #f5f1f3
padding: 11px 0
&:hover, &:focus
background-color: darken(#f5f1f3, 3%)
color: #444
border: none
background-color: $accent2
color: #fff
width: 100%
padding: 8px 0
font-size: 18px
transition: background-color .25s ease
&:hover, &:focus
background-color: lighten($accent2, 5%)
text-decoration: none
&:active
background-color: darken($accent2, 5%)
.fa
display: none
.alert
border-radius: 0
#column-left
> div
> blockquote
border: none
padding: 0
margin-top: 45px
color: #777
line-height: 1.3
ul
padding: 0
margin: 0
list-style-type: none
li
border: 5px #f7f7f7 solid
margin-bottom: 20px
padding: 15px 20px 20px 38px
background-color: transparent
transition: border-color .2s ease, background-color .4s ease, color .25s ease, transform .5s ease
font-size: 14px
position: relative
&:nth-child(1)
display: none
> span
color: #921AD3
&:hover
background-color: #921AD3
border-color: #921AD3
&:nth-child(2)
> span
color: $accent4
&:hover
background-color: $accent4
border-color: $accent4
&:nth-child(3)
> span
color: $accent2
&:hover
background-color: $accent2
border-color: $accent2
&:nth-child(4)
> span
color: $accent3
&:hover
background-color: $accent3
border-color: $accent3
&:hover
border-color: #666
background-color: #666
color: #fff
transform: translateY(-5px)
> span
color: #fff
> span
display: block
font-size: 18px
margin-bottom: 5px
font-family: MyriadSetProSemiBold, sans-serif
> span
position: absolute
left: 0
font-size: 18px
left: 15px
.hidden-xs
display: none !important
.mfp-content
.product-popup
display: block
.price-tax
display: none
.pp-img-wrap
text-align: center
img
max-width: 90%
width: 90%
margin-top: 15px
.pp-content
h3
text-align: center
font-family: MyriadSetProThin, sans-serif
margin: 30px 0 15px
p
text-align: center
.price-old
text-decoration: line-through
font-size: 14px
.product-popup
background-color: #fff
max-width: 320px
position: relative
margin: auto
padding: 15px
display: none
.success
position: absolute
z-index: 1
top: 0
left: 0
right: 0
bottom: 0
background-color: #fff
text-align: center
text-transform: uppercase
padding: 80% 10% 10%
display: none
form
position: relative
margin-top: 15px
h2
margin:
top: 15px
bottom: 10px
font-size: 28px
text-align: center
font-family: MyriadSetProThin, sans-serif
p
text-align: center
.btn
position: absolute
right: 0
top: 0
.skidki-non
display: none
.callback-form
.success
padding-top: 28%
.form-control
border-radius: 0
font-family: arial, sans-serif
.main-footer
margin-top: 60px
.footer-cnt
background-color: #333
padding: 7px 0
> .container
> .row
>div:last-child
border-left: #444 1px solid
.footer-mnu
ul
display: none
margin: 0
padding: 0
width: 100%
text-align: left
li
display: inline-block
font-size: 14px
float: none
a
color: #999
display: block
padding: 10px 0 0 0
transition: all .25s ease
&:hover, &:focus
color: #b6b6b6
background-color: transparent
text-decoration: underline
.foter-copuring, .copuring
padding: 6px 0 0
text-align: center
ul, li
padding: 0
margin: 0
li
display: inline-block
a
color: #999
font-size: 15px
padding: 0 5px
text-decoration: none
.nav-social
padding: 6px 0 0
text-align: center
ul, li
padding: 0
margin: 0
li
display: inline-block
a
color: #777
font-size: 20px
padding: 0 5px
transition: color .25s ease
&:hover
color: lighten(#8f8f8f, 10%)
.footer-phone
background-color: #262626
color: #8c8c8c
padding: 18px 0 35px
.site-phone
font-size: 22px
color: #c8c8c8
margin-top: 8px
line-height: 1.3
.site-phone_wrap
text-align: center
font-family: MyriadSetProThin, sans-serif
.callback
color: #777
border-bottom: 1px dashed #777
transition: border-bottom .25s ease, color .25s ease
font-size: 14px
&:hover, &:focus
color: lighten(#999, 10%)
text-decoration: none
border-color: lighten(#999, 10%)
.btn
border-radius: 0
transition: background-color .25s ease, border-color .25s ease
.btn-primary
background-color: $accent2
border-color: $accent2
.breadcrumb
display: none
#content
h1
margin-top: 35px
margin-bottom: 15px
text-align: center
font-family: MyriadSetProThin, sans-serif
.input-group-sm>.form-control, .input-group-sm>.input-group-addon, .input-group-sm>.input-group-btn>.btn
border-radius: 0
.input-group-addon
font-family: MyriadSetProSemiBold, sans-serif
.form-group
padding: 7px 0 0 0
.sub-cats
font-size: 14px
margin-top: 10px
.sub-name
font-family: MyriadSetProSemiBold, sans-serif
display: inline-block
a
font-family: MyriadSetProThin, sans-serif
color: #333
text-decoration: underline
padding: 0 2px
&:hover
text-decoration: none
.cat-head
border-bottom: #EAEAEA 1px solid
margin-bottom: 30px
.pagination>li:first-child>a, .pagination>li:first-child>span,
.pagination>li:last-child>a, .pagination>li:last-child>span
border-radius: 0
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover
background-color: $accent2
border-color: $accent2
.price-wrap
margin-top: 40px
.def-price, .spec-price
font-size: 36px
font-family: MyriadSetProThin, sans-serif
#product
margin-top: 40px
button
background-color: $accent3
border-color: $accent3
.control-label
font-weight: normal
margin-bottom: 0
font-size: 14px
position: relative
bottom: -4px
.product-count
position: relative
top: -13px
.fa-stack-2x
font-size: 1.5em
#tab-description
padding: 30px 0
.nav-tabs>li>a
border-radius: 0
.product-page-image
list-style-type: none
padding: 0
margin: 0
.thumbnail
border: none
.product-old-price
text-decoration: line-through
position: relative
bottom: -8px
.information-contact
#content
h3
text-align: left
font-family: MyriadSetProThin, sans-serif
margin-bottom: 10px
address
margin-bottom: 0
.panel
border-radius: 0
#map
min-height: 420px
margin: 20px 0
.panel-heading,
.panel-group .panel
border-radius: 0
.product-tabs
margin-bottom: 40px
.product-page-image
background-size: contain
padding: 35px
.image-additional
float: left
position: relative
width: 50px
@import "media"
Вот код хедер:
<!DOCTYPE html>
<!--[if IE]><![endif]-->
<!--[if IE 8 ]><html dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>" class="ie8"><![endif]-->
<!--[if IE 9 ]><html dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><?php echo $title; if (isset($_GET['page'])) { echo " - ". ((int) $_GET['page'])." ".$text_page;} ?></title>
<base href="<?php echo $base; ?>" />
<?php if ($description) { ?>
<meta name="description" content="<?php echo $description; if (isset($_GET['page'])) { echo " - ". ((int) $_GET['page'])." ".$text_page;} ?>" />
<?php } ?>
<?php if ($keywords) { ?>
<meta name="keywords" content= "<?php echo $keywords; ?>" />
<?php } ?>
<meta property="og:title" content="<?php echo $title; if (isset($_GET['page'])) { echo " - ". ((int) $_GET['page'])." ".$text_page;} ?>" />
<meta property="og:type" content="website" />
<meta property="og:url" content="<?php echo $og_url; ?>" />
<?php if ($og_image) { ?>
<meta property="og:image" content="<?php echo $og_image; ?>" />
<?php } else { ?>
<meta property="og:image" content="<?php echo $logo; ?>" />
<?php } ?>
<meta property="og:site_name" content="<?php echo $name; ?>" />
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<?php foreach ($styles as $style) { ?>
<link href="<?php echo $style['href']; ?>" type="text/css" rel="<?php echo $style['rel']; ?>" media="<?php echo $style['media']; ?>" />
<?php } ?>
<link href="catalog/view/javascript/jquery/magnific/magnific-popup.css" rel="stylesheet">
<link href="catalog/view/theme/..../stylesheet/stylesheet.css" rel="stylesheet">
<script src="catalog/view/javascript/common.js" type="text/javascript"></script>
<?php foreach ($links as $link) { ?>
<link href="<?php echo $link['href']; ?>" rel="<?php echo $link['rel']; ?>" />
<?php } ?>
<?php foreach ($scripts as $script) { ?>
<script src="<?php echo $script; ?>" type="text/javascript"></script>
<?php } ?>
<?php foreach ($scripts as $script) { ?>
<script src="<?php echo $script; ?>" type="text/javascript"></script>
<?php } ?>
<script src="catalog/view/theme/...../libs/equalheights/equalheights.js"></script>
<script src="catalog/view/javascript/jquery/magnific/jquery.magnific-popup.min.js"></script>
<script src="catalog/view/theme/..../js/theme.js"></script>
<?php foreach ($analytics as $analytic) { ?>
<?php echo $analytic; ?>
<?php } ?>
</head>
<body class="<?php echo $class; ?>">
<header>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-6">
<div id="logo" class="logo">
<?php if ($logo) { ?>
<?php if ($home == $og_url) { ?>
<img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" />
<?php } else { ?>
<a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" /></a>
<?php } ?>
<?php } else { ?>
<h1><a href="<?php echo $home; ?>"><?php echo $name; ?></a></h1>
<?php } ?>
</div>
</div>
<div class="col-md-7 col-sm-7 col-xs-10">
<?php echo $search; ?>
</div>
<ul class="col-md-2 col-sm-2 col-xs-2">
<li class="dropdown"><a href="<?php echo $account; ?>" title="<?php echo $text_account; ?>" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_account; ?></span> <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-right">
<?php if ($logged) { ?>
<li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li>
<li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li>
<li><a href="<?php echo $transaction; ?>"><?php echo $text_transaction; ?></a></li>
<li><a href="<?php echo $download; ?>"><?php echo $text_download; ?></a></li>
<li><a href="<?php echo $logout; ?>"><?php echo $text_logout; ?></a></li>
<?php } else { ?>
<li><a href="<?php echo $register; ?>"><?php echo $text_register; ?></a></li>
<li><a href="<?php echo $login; ?>"><?php echo $text_login; ?></a></li>
<?php } ?>
</ul>
</li>
</ul>
</div>
</div>
</header>
<nav id="top" class="top-menu">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-9 col-lg-10 nav-wrapper">
<nav id="menu" class="navbar">
<div class="navbar-header"><span class="toggle-top-text hidden-lg hidden-md hidden-sm"><?php echo $text_information; ?>:</span>
<button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<?php if ($informations) { ?>
<ul class="nav navbar-nav">
<?php foreach ($informations as $information) { ?>
<li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a></li>
<?php } ?>
</ul>
<?php } ?>
</div>
</nav>
</div>
<div class="col-sm-4 col-md-3 col-lg-2 cart-wrapper">
<?php echo $cart; ?>
</div>
</div>
</div>
</nav>
Вот футер:
<footer class="main-footer">
<div class="footer-cnt">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-6 hidden-sm hidden-xs">
<nav class="foter-copuring">
<ul>
<li><a href="http://ontake.me" rel="nofollow" target="_blank"><span class="copuring"> ........</span></a></li>
<li><a href="http://ontake.me" rel="nofollow" target="_blank"><i class="fa fa-copyright"> 2017</i></a></li>
</ul>
</nav>
</div>
<div class="col-md-7 hidden-sm hidden-xs">
<nav class="footer-mnu">
<?php if ($informations) { ?>
<ul class="nav navbar-nav">
<?php foreach ($informations as $information) { ?>
<li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a></li>
<?php } ?>
</ul>
<?php } ?>
</nav>
</div>
<div class="col-md-2 col-sm-6">
<nav class="nav-social">
<ul>
<li><a href="http://vk.com" rel="nofollow" target="_blank"><i class="fa fa-vk"></i></a></li>
<li><a href="http://facebook.com" rel="nofollow" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="http://instagram.com" rel="nofollow" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
Помогите пожалуйста. Я уже кучу вариантов перепробовал. Не один не помог =(
