Site logo not mobile friendly
-
Hi guys,
im currently rebranding a website: https://vemavm.com/test
WordPress theme: xclean
However, I have a huge problem. The logo is not mobile friendly.
Can someone assist please?
This is what I have as per logo via css:
/*=======================================
= Home Page Style =
=======================================*/
.home .wooproduct {
margin-bottom: 0;
}
.header {
height: 90px;
transition: 0.3s linear !important;
}
.header .header-navigation .header-cart {
right: 53px;
}
.header .site-logo img {
width: 100px;
margin-left: -30px;
margin-top: 0;
}
.header.fixed-header {
height: 70px;
}
.site-content {
margin-top: 93px;
}
.navbar-toggle {
top: -36px;
}
.header-search {
top: 8px;
}
header .site-logo img {
margin-left: 25px;
}
header .slideItWrapper {
top: -32px;
}
header .navbar-toggle {
left: -10px;
}
header .header-nav li .sub-menu li {
padding: 10px 20px 12px 20px;
}
header .header-nav li .sub-menu li a:hover:before {
margin-right: 10px;
-webkit-transform: translateX(3px);
-moz-transform: translateX(3px);
-ms-transform: translateX(3px);
transform: translateX(3px);
}
header .header-nav li .sub-menu li a:before {
-webkit-transform: translateX(-10px);
-moz-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
header .header-search > img {
position: relative;
right: 0;
top: -39px;
padding: 7px 20px 20px 5px;
}
header .header-search.popup-woo > img {
top: 30px;
}
header .search-inside form {
width: 300px;
padding: 25px 33px;
}
header .search-inside form input[type=”text”] {
color: #fff;
}
header .search-inside form input[type=”submit”]:hover {
opacity: 0.6;
}
.header-search .searchform input[type=”text”] {
width: 195px !important;
}
.banner-section h4 {
margin-bottom: 15px;
}
.banner-section.bordered h4 {
padding-top: 35px;
}
.banner-section.bordered .banner-content {
padding-bottom: 35px;
}
.banner-section.bordered .vertical-top h4 {
padding-top: 10px;
}
.banner-section.bordered .vertical-top .banner-content {
padding-bottom: 75px;
}
.banner-section.bordered .vertical-bottom h4 {
padding-top: 75px;
}
.banner-section.bordered .vertical-bottom .banner-content {
padding-bottom: 10px;
}
.wooslider .metaslider .caption-wrap .right,
.wooslider .metaslider .caption-wrap .left {
top: 15%;
}
.wooslider .metaslider .caption-wrap h5 {
font-size: 14px;
margin-bottom: 10px;
}
.wooslider .metaslider .caption-wrap h2 {
font-size: 14px !important;
line-height: 18px;
margin-bottom: 10px;
}
.wooslider .metaslider .caption-wrap a {
font-size: 14px;
}
.big-title h4 {
font-size: 26px !important;and then further down:
@media only screen and (min-width: 320px) and (max-width: 480px) {
/*=======================================
= Home Page Style =
=======================================*/
.home .wooproduct {
margin-bottom: 0;
}
.header {
height: 90px;
transition: 0.3s linear !important;
}
.header .header-navigation .header-cart {
right: 53px;
}
.header .site-logo img {
width: 100px;
margin-left: -30px;
margin-top: 0;
}
.header.fixed-header {
height: 70px;
}
.site-content {
margin-top: 93px;
}
.navbar-toggle {
top: -36px;
}
.header-search {
top: 8px;
}
header .site-logo img {
margin-left: 25px;
}
header .slideItWrapper {
top: -32px;
}
header .navbar-toggle {
left: -10px;
}
header .header-nav li .sub-menu li {
padding: 10px 20px 12px 20px;
}
header .header-nav li .sub-menu li a:hover:before {
margin-right: 10px;
-webkit-transform: translateX(3px);
-moz-transform: translateX(3px);
-ms-transform: translateX(3px);
transform: translateX(3px);
}
header .header-nav li .sub-menu li a:before {
-webkit-transform: translateX(-10px);
-moz-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
header .header-search > img {
position: relative;
right: 0;
top: -39px;
padding: 7px 20px 20px 5px;
}
header .header-search.popup-woo > img {
top: 30px;
}
header .search-inside form {
width: 300px;
padding: 25px 33px;
}
header .search-inside form input[type=”text”] {
color: #fff;
}
header .search-inside form input[type=”submit”]:hover {
opacity: 0.6;
}
.header-search .searchform input[type=”text”] {
width: 195px !important;
}
.banner-section h4 {
margin-bottom: 15px;
}
.banner-section.bordered h4 {
padding-top: 35px;
}
.banner-section.bordered .banner-content {
padding-bottom: 35px;
}
.banner-section.bordered .vertical-top h4 {
padding-top: 10px;
}
.banner-section.bordered .vertical-top .banner-content {
padding-bottom: 75px;
}
.banner-section.bordered .vertical-bottom h4 {
padding-top: 75px;
}
.banner-section.bordered .vertical-bottom .banner-content {
padding-bottom: 10px;
}
.wooslider .metaslider .caption-wrap .right,
.wooslider .metaslider .caption-wrap .left {
top: 15%;
}
.wooslider .metaslider .caption-wrap h5 {
font-size: 14px;
margin-bottom: 10px;
}
.wooslider .metaslider .caption-wrap h2 {
font-size: 14px !important;
line-height: 18px;
margin-bottom: 10px;
}
.wooslider .metaslider .caption-wrap a {
font-size: 14px;
}
.big-title h4 {
font-size: 26px !important;
}Much appreciate it guys.
Kenny
-
Hi there,
vemavm.com/test is not hosted at WordPress.com.
This support forum is for sites hosted at WordPress.com. Your question is about a self-hosted WordPress site and you’ll find help at the WordPress.org forums.
If you don’t understand the difference between WordPress.com and WordPress.org, you may find this information helpful.
- The topic ‘Site logo not mobile friendly’ is closed to new replies.