Return to previous page

Mobile nav issue on tablets - by neil - on WordPress WooCommerce support

This topic has 7 replies, 4 voices, and was last updated 10 years, 8 months ago ago by Brian Johnson

neil

Participant

April 2, 2015 at 13:36

Hi there

I have a issue with the navigation on tablets, here is a screenshot http://www.givaprint.co.uk/wp-content/uploads/2015/04/screen-shot.jpg

Any idea what I am doing wrong? I have this custom CSS

@media (max-width: 780px) {.fixed-header-area .header-logo img {
width: 200px !important;
}}

.header-type-10 .menu-wrapper {
background-color: #0000b2;
}

.menu > li a {
font-size: 11px;
color: #fff
}

.header-type-10 .menu-wrapper .navbar-collapse .menu-main-container .menu > li > a {
color: #fff !important;
font-size: 13px !important;
}
.header-type-10 .menu-wrapper .navbar-collapse .menu-main-container .menu > li > a:hover {
color: #FA6D17 !important;
}

.header-type-10 .header .header-logo img {
width: 900px;
max-width: 900px;
}

h1{color: #0000b2;
font-weight: bold;
}

h2{color: #0000b2;
font-weight: bold;
}

h3{color: #0000b2;
font-weight: bold;
}

#54187 Copied Theme version: 4.1.1 WooCommerce version: 2.3.7

6 Answers
Robert Hall

Participant

April 2, 2015 at 13:58
Hello,

Please try to add following code in custom.css file.

@media (max-width: 1200px){ .header-type-10 .menu-wrapper .menu-main-container > ul > li > a{ padding: 21px 15px; }}

Here is a video tutorial how to create custom.css: https://www.youtube.com/watch?v=Qok2zRedRMY&feature=youtu.be.

Regards,
Robert Hall.
#54201 Copied
Eva Kemp

Participant

April 2, 2015 at 13:59
Hello,

Please try to use this code in custom.css file:

@media only screen and (max-width: 1200px) {.header-type-10 .menu-wrapper .navbar-collapse .menu-main-container .menu > li > a { font-size: 11px !important; }}

Regards,
Eva Kemp.
#54202 Copied
neil

Participant

April 2, 2015 at 14:10

Thank you, just one issue, the logo is now got left padding as you can see on this screenshot http://www.givaprint.co.uk/wp-content/uploads/2015/04/screen-shot-portrait.jpg

Any code to fix this?

#54210 Copied
Brian Johnson

Member

April 2, 2015 at 15:11
Hello

You may try to add this code into the custom.css:

@media only screen and (max-width: 1200px){ .header-type-10 .header .header-logo img{;max-width:800px!important;}} @media only screen and (max-width: 992px){ .header-logo{left:10%;margin-left:20%;}.header-type-10 .header .header-logo img{;width:200%!important;}} @media only screen and (max-width: 640px){ .header-logo{left:auto;right:auto;margin-left:35%;margin-right:auto;}.header-type-10 .header .header-logo img{;width:150%!important;}}

With best regards
Brian Johnson
#54225 Copied
neil

Participant

April 2, 2015 at 15:16

Perfect!!!!

Thank you for your help!

#54228 Copied

Brian Johnson

Member

April 2, 2015 at 15:19

You are welcome!

Sorry. I have edited a bit code from previous message.Please try this one.

With best regards
Brian Johnson

#54230 Copied
Viewing 7 results - 1 through 7 (of 7 total)