Reponsive > iPad Portrait – Top Menu

[daniellemarie]

Hi,

On iPad Portrait view, the top menu turns into the toggle icon. I’d like the menu to still be displayed as normal in this view. How can I make this happen?

Thanks!

[daniellemarie]

Update: iPad Landscape view also seems to do this.

[SQadmin]

Hi, this is by default how Foundation works so if you want to achieve this you need to modify some template files. I can help if you tell me how is best for you:
– to move this behavior to lower resolution (767px or 480px);
– to remove this behavior entirely (not recommended).

Regards,
Robert

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

[studiblog]

I have the Same question in another Topic i opened yesterday. In want to Show the normal Menu at the ipad in both views (vertical and horizontal). But maybe Not on the iphone , for that might be the mobile bar better. How can we do this?

[daniellemarie]

Hi studiblog,

I managed to fix this. If you’re interested, here’s what I did.

Edit the sweetdate/assets/styles/responsive.css file:

Around Line 63 – changed from 768px to:
@media only screen and (max-width: 600px) {

Around Line 205 – changed from 940px to:
@media only screen and (max-width: 600px) {

Around Line 372 – changed from 1024 to:
@media only screen and (max-width: 600px) {

Hope that helps! 🙂

[studiblog]

thx a lot for the code, but i can nothing find in line around line 372, i got it at line 63 and 205.
now i have a separated top bar^^ the one that i want to have AND the mobile bar.

[daniellemarie]

For the last one, you need to look for the following:

/* Topbar Specific Breakpoint that you can customize */
@media only screen and (max-width: 1024px) {

Change it to:

/* Topbar Specific Breakpoint that you can customize */
@media only screen and (max-width: 600px) {

That should remove the mobile bar for you 😉

[studiblog]

Yes thank you, it works, but now the bar has still a blue background and it is not STICKY and looks not like on real computers. mh look: http://www.spottedfriends.de

[daniellemarie]

You might need to tweak the CSS to remove the blue background. I’ve done a lot of custom work on my site so if this didn’t work for you, it might be best to undo the changes you just made and wait for support to help you. Sorry I can’t be of more help! 🙂

[SQadmin]

Hi @daniellemarie, thank you very much for trying to help. I have a different approach to it which might help.
I think more simple is to modify from 940px to 767px in ../assets/styles/responsive.css the folowing lines: 205, 278, 372(or 369) and add one line of code, it will become line 281 like this example: http://d.pr/i/C00U

COPY CODE

.top-bar { background: transparent !important; }

ps: I also changed on one of our demo: http://seventhqueen.com/demo/sweetdatewp/

Regards,
Robert

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

[studiblog]

thanks, much better, (btw..i think it was line 362…)

but there are still 2 bugs: also in your demo!
1) the drop down ( for example: features–>membership levels) opens correct, but does only work if you hold the tablet vertical, if you hold it widescreen you can tap on it and nothing happens. sounds very strange, but no joke.
2) i want to have it as a sticky menu like using the theme with a pc, that is important for me

hope with your help i can do that.

[studiblog]

update: bug 2) the menu is sticky, reacts a bit slow, but is sticky. sorry for that
but same problem in the sticky menu, horizontal AND vertical: the drop down doesn’t work properly if you touch on a menu point in a drop down. If you scroll to the top of the page and use the normal Menu (Not sticky) the Touch Problem is only when you hold it witescreen.

[studiblog]

There are still the problems with the menu on tablets described above.
“the drop down doesn’t work properly if you touch on a menu point in a drop down menu. If you scroll to the top of the page and use the normal Menu (Not sticky) the touch problem is only when you hold the tablet witescreen. Also at your demo site.”
It would be very important to fix that, because up to 10% of users use tablets.
Thank you very much in advance 🙂

[Abe]

Hi,
Update: We are doing some tests to resolve your reported problems.

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

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[SQadmin]

Hi studiblog, I checked and it seems to be a problem only on iPad and iPhone. You are one of our priorities and as soon as we have a fix for this will let you know. Thank you for your waiting time.

Regards,
Robert

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

[Author]

Posts