Ipad Nav Size

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;
}
}

I see burger icon here. Did you solve?

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. 

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

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)

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. 

@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.

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;
}
}