Jump to content

Ipad Nav Size

Recommended Posts

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

Link to comment
  • Replies 7
  • Views 2k
  • Created
  • Last Reply

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 comment

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 comment
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

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!)

Link to comment

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 comment

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

 

Link to comment

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 comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.