Problem with Toggle menu disappearing on iPad and phone view

[LindaK816]

Hi Support – I thought I submitted a ticket with this issue a while ago but I don’t see it anywhere so I apologize if it is a duplicate.  I am having a problem with my site at:  http://www.treyburn-test.org/ while viewing it on the iPad or Smart phone view where the toggle menu doesn’t display – the regular navigation menu doesn’t display either.  I am putting my site into production very soon and this is the last glitch – thanks for all your help!!  I just love the theme and the support!

Best,
LindaK

[Laura]

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[LindaK816]

This reply has been set as private.

[Radu]

Hi,

Did you have tried to deactivate all plugins?

Did you have tried to remove all css from quick css area? (save it for later use) if it works

—-

I’ve noticed after,

The problem it’s caused by the css provided above, try to remove all of that and check again,

Then let me know what you need to achieve.. to can find a proper solution for that.

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[LindaK816]

This reply has been set as private.

[Radu]

Hi,

Just remove the CSS that “fix” the header height and just go to wp-admin -> theme options -> header options -> Header Height -> lower value default it’s 88, i think now you have 450 or similar.

Let me know

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[LindaK816]

Hi Radu – thank you for your reply. I tried making those changes and it didn’t fix the problem. I am still having multiple problems when I remove the css fixes that Laura helped me with. I tried both removing the css overrides listed above in my last reply and totally removing all css overrides and they produced the same result (please see uploaded image). I also went into Theme Options/Header Options and specified Header Height: 360. The only thing that seemed to make everything look right is if I specify the header height to be 88 and then everything works perfectly but I don’t want my header to be so small. Any thoughts?

Thank you!
Linda

Attachments:

You must be logged in to view attached files.

[Radu]

Hi,

If you remove all css and you see that(wired layout ) it’s because you have a line height to big (350px)

Please take a look at the video: https://drive.google.com/file/d/0Bxo5b6iHWRMwdFRWMFRKZEthSHc/view

This how it looks on mobile, as you can see there is no mobile menu toggle… cuz it’s hidden by a quick CSS code.

I’ve made some adjustments live on inspect console how it should look and works in my opinion as UX on mobile devices

see the video: https://drive.google.com/file/d/0Bxo5b6iHWRMwb0J4T2M2bU1nUjQ/view

watch both videos in HD

IF you want to have header bigger let me know where on mobile? on dekstop? and how ? draw me over or made a screenshot that points there with explicative notes how you need that to can solve your header problem 🙂

Let me know
Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[LindaK816]

Hi Radu – thanks for your thorough attention to this matter – I really appreciate it.

I have attached a markup of the Home page showing the logo area the way I would like it to appear on a large screen desktop. I certainly want the logo to reduce in size for smaller devices and to be appropriately small on a mobile device. How do we get this to work? I’m not sure if I have provided enough info – please let me know.

Thank you!
Linda

Attachments:

You must be logged in to view attached files.

[Radu]

I understand,

So on the desktop, you want to have the view like now! with the big logo and below the menu as it is now.

But on mobile let me know if it’s ok like in this video on first seconds: https://drive.google.com/file/d/0Bxo5b6iHWRMwb0J4T2M2bU1nUjQ/view

So as you can see there it’s the logo 80% of the width than in the right side the menu trigger 20% on the right.

If it’s ok as I suggest let me know the WP admin credentials + FTP

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[LindaK816]

This reply has been set as private.

[Radu]

Hi,

I’ve removed css that modifies the header at this matter and i’ve added this one

COPY CODE

/*RADU SQ7 CSS START*/
@media(min-width:991px) {
    img#logo_img {
    margin-top:5px;
}

.navbar-header {
    height: auto !important;
}

}

@media(max-width:991px) {
    img#logo_img {
    width: 100% !important;
    float:left !important;
    }
    .logo a {float:left !important;}

    .navbar-header {
        height: auto !important;
    }
    .navbar-header .logo {
    float: left !important;
    width: 80%;
    padding: 20px 0;
    }
}

/*RADU SQ7 CSS END*/

So now on mobile it looks like this :

On desktop like this :

So the views are how I’ve suggested in my previous post with the video.

So hope all good now, let me know if is ok to can close this ticket.

Also there it’s the original css that I’ve found in quick css area https://pastebin.com/raw/7t3anxjh

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[LindaK816]

Thank you Radu – it looks awesome!!

I really appreciate it : )

[Radu]

Hi,

Great,
If you haven’t already given us a review, please leave a short review … few words about your experience with the support service.

https://themeforest.net/item/kleo-next-level-wordpress-theme/reviews/6776630

Thank you in advance

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts