Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Ipad Nav Size


Dee12

Question

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

Edited by Dee12
Link to post
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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: 9

Posted Images

7 answers to this question

Recommended Posts

  • 0

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. 

0E8950E0-B661-4F42-BC71-2CB2817C2D0D_1_101_o.jpeg

Link to post
  • 0

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

29899C62-CAE4-423E-A30A-A81FB7B1D249.jpeg

Link to post
  • 0
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)

image.thumb.png.5b98bf6d113ec3f2095fd2cb0992564c.png

Link to post
  • 0

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. 

Link to post
  • 0

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

 

Edited by Dee12
Link to post
  • 0

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

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...