Menu on mobile device


#1

Hello,

When my website is viewed on a mobile device the logo overlaps the content.

Is there a way to ‘push’ the content down so it doesn’t overlap?

Any help is really appreciated!


#2

Hello there,

Thank you for asking.

Could you please post your URL here so I can have a look?

Warmest regards,
Kharis


#3

Hi Kharis,

Sorry I should have put that on for you!

The url is http://varii.co.uk/

Best regards,
Simon


#4

Dear Simon,

Thank you for the link. It helped me a lot.

Could you please try to add the following CSS code through the Simple Custom CSS plugin?

@media only screen and (max-width:780px){

  .home #masthead{
    background: #000;
  }

  .home #content.page-wrap{
    padding-top: 120px;
  }

}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Warmest regards,
Kharis


#5

Thanks so much for that - you’re an absolute star!

Looks really good now, really appreciate the help Kharis :slight_smile:


#6

Dear Simon,

You’re welcome. I’m glad to have an opportunity to assist you. Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Warmest regards,
Kharis


#7

Great thanks so much!


#8

Sorry to be a pain but when I’ve checked on my phone it cuts off part of the first sentence “Varii Marketing is a Marketing &” only the bottom half of the letters are visible. This is the same across google chrome and safari.

However, when I drag the screen size down on my laptop it doesn’t alter.

Would you be able to resolve this at all?

Kind regards,
Simon


#9

Hello there,

Thank you for reporting.

I was thinking that we should need to increase the padding value of the previous code into 140px.

  .home #content.page-wrap{
    padding-top: 120px; 
  }

Let me know how it works.

Warmest regards,
Kharis


#10

Brilliant thanks Kharis, that’s resolved it - thanks for such a fast response!


#11

Hello,

Sorry to be difficult but I amended some css with contact form 7 and it’s thrown out the menu bar on mobile screens.

Would you please be able to advice what I should do to amend the css?

Here is the complete code I use on the CSS plugin:

@media only screen and (max-width: 780px) {
.roll-client .client-item {
display: block;
width: 100%;
margin-bottom: 0px;
}
}
@media only screen and (min-width: 1920px) {
.project-item a img {
width: 100%;
}
}
@media only screen and (max-width: 780px){
.crellyslider {
display: none;
}
}
.text-slider .maintitle {
text-shadow: 2px 2px 2px #2c2c2c;
}
.text-slider .subtitle{
text-shadow: 2px 2px 2px #2c2c2c;
}
.btn-menu {
text-shadow: 2px 2px 2px #2c2c2c;
}
/* Contact Form 7 Styles */

/* Add Drop Shadow, Rounded Corners, and Background to Contact Form 7 */
.wpcf7 input, textarea {
font-size: 14px; margin: 0 10px 10px 0;
padding: .5rem 5rem;
border: 0px solid #ffffff;
}

/* Adjusting Widths for Input and Text Area fields to Contact Form 7 */

.wpcf7 input {
width: 160px;
color: black !important;
font-size: 13px !important;
}
.wpcf7-form p:first-of-type input {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: black !important;
}
.wpcf7 textarea {
width: 80%;
}

.wpcf7 input, submit {
font-family: Lato,sans-serif;
font-weight: 400;
color: white !important;
font-size: 13px !important;
background: C6007E;
border: none;
width: 100% !important;
padding: 0px 0px;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
-webkit-appearance: none;
}
.wpcf7-form p:last-of-type input {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
top: -10px;
}
.wpcf7-submit:hover {
background-color: #ff02a3 !important;
font size: 13px;
}
.wpcf7 input, submit {
@media only screen and (max-width:780px){

.h1, h2, h3, h4, h5, h6 {
letter-spacing: 1px !important;
}
.home #masthead{
background: #000;
}
.home #content.page-wrap{
padding-top: 140px;
}


#12

IGNORE ME! I’ve found the problem :slight_smile:


#13

Apologies about this, I have got the menu to be fully visible on mobile devices, but now the menu partially covers the slider when it is not on a mobile device.

Would you please be able to give some help on this?

Happy to put in a separate thread if needed.

Kind regards