Dee12 Posted May 5, 2020 Posted May 5, 2020 Hello! My site navigation text on iPad (horizontal) view stacks on top of each other. I was wondering if there was a way for the iPad view to resemble the desktop view. I'm not sure what code I should use to prevent the menu from changing. Any assistance would be greatly appreciated! I tried this code but it wasn't responsive: @media screen and (min width: 768px) and (max-width:1024px) { .header-menu-nav-item a { font-size: 20px; } }
tuanphan Posted May 5, 2020 Posted May 5, 2020 I see burger icon here. Did you solve? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Dee12 Posted May 5, 2020 Author Posted May 5, 2020 No, when my iPad Pro is on landscape view the header navigation text stacks on top each other. I think I need to decrease the logo size when its on a iPad screen or adjust the padding but I'm not sure how to.
Dee12 Posted May 5, 2020 Author Posted May 5, 2020 It does the same thing on a desktop If you adjust the page size (width). How do I keep the navigation menu from stacking? I noticed other sites stay the same when you adjust the browser width. I attached a screen shot of my website on desktop view when I make the screen smaller, the footer stays the same but the navigation doesn't. @tuanphan
tuanphan Posted May 7, 2020 Posted May 7, 2020 On 5/6/2020 at 12:48 AM, Dee12 said: It does the same thing on a desktop If you adjust the page size (width). How do I keep the navigation menu from stacking? I noticed other sites stay the same when you adjust the browser width. I attached a screen shot of my website on desktop view when I make the screen smaller, the footer stays the same but the navigation doesn't. @tuanphan You shoul check on real screen. When reducing the browser width, of course, items need to be stacked to allow enough space for all items. Seems fine on ipad Pro portrait *& landscape (use Chrome Dev Tools) Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Dee12 Posted May 7, 2020 Author Posted May 7, 2020 On iPad horizontal view it stacks when I’m viewing my site. I’ve seen other websites navigation stay the same that’s why I asked lol. Like my navigation isn’t adjusting to the iPad screen.
Dee12 Posted May 7, 2020 Author Posted May 7, 2020 @media screen and (min-width: 992px) and (max-width: 1366px) { .header-nav a { font-size: 15px; position: relative; } } I can't figure out how to prevent the nav links from jumping down to another line.
Dee12 Posted May 8, 2020 Author Posted May 8, 2020 If anyone needs it, I figured out a code that prevents your navigation links from stacking. For iPad Pro 11" landscape view: (Edit the width, margin and font-size) @media screen and (min-width: 992px) and (max-width: 1366px) { .header-nav-list { width: 150% !important; font-size: 9px !important; margin-left: -7.2em !important; } }
Recommended Posts
Archived
This topic is now archived and is closed to further replies.