Jump to content

How do I force my desktop navigation onto mobile? And how do i add a secondary sticky vertical nav for both desktop & mobile?

Recommended Posts

Hey!  Looking for some help on forcing the Desktop Nav. to the mobile one.  So removing the hamburger nav, and replacing it with desktop one.

Heres my site, owenbelanger.ca (Code is 5049)

Also, looking to add a secondary vertical navigation on each side, sitewide and platform wide, similar to this site alimsabir.com

Thanks!

Link to comment

Yes, how do i make the mobile nav, look like the desktop nav.  Putting the items underneith the logo, same as my desktop version.

 

And for the contact button, I'm thinking now it would be cool to the about page vertical on the left side of the screen, and the about page vertical on the right side of the screen.  But not sure how to do that.

 

Screenshot 2024-01-15 at 7.00.30 PM.png

Link to comment

#1. You can add this code to Website Tools (under Not Linked) > Custom CSS

@media screen and (max-width:991px) {
.header-display-desktop {
    display: flex !important;
}
.header-display-mobile {
    display: none;
}
.header-burger {
    display: none;
}
.header-nav {
    display: flex !important;
}
.header-nav {
    display: flex !important;
    flex: 70% !important;
    justify-content: flex-end;
}
    
.header-title-logo {
    text-align: center;
}}

#2. Move these items to float left/right of screen?

image.thumb.png.a7678437ebf16a5b74e91b42d08c3087.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

Sweet!  Thanks for that.  Its close!  I'll drop a screenshot below of how I'm thinking of it.

I've added that code to my website, it works great.  Wondering if i can downsize the fonts to fit better (Like how i drew it in the screenshot).  But keep it the same size on my desktop.

And I added where i want the floating sticky "About" and "Contact" buttons on the website.  This addition would be awesome if its was site-wide, so vertical about and contact buttons on desktop and mobile.

 

IMG_3887.jpg

Link to comment

To make About, Contact float on left/right of screen, use this CSS code

div.header-nav-item:last-child {
    position: fixed;
    left:0;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
}
div.header-nav-item:nth-last-child(2) {
    position: fixed;
    right:0;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);   
}

image.thumb.png.17161598c16a7e8f4c911a39f833d022.png

To make nav items smaller on mobile, use this CSS code

@media screen and (max-width:991px) {
.header-display-desktop {
    display: flex !important;
}
.header-display-mobile {
    display: none;
}
.header-burger {
    display: none;
}
.header-nav {
    display: flex !important;
}
.header-nav {
    display: flex !important;
    flex: 70% !important;
    justify-content: flex-end;
}
  .header-nav * {
      font-size: 10px;
  }  
.header-title-logo {
    text-align: center;
}}

 

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

Thanks works perfect!  The final things I'm looking to be able to change the font size & thickness of the About and Contact page (as well as make sure they're equally aligned on both sides).  

And i have 1 new question, is there a way to have video blocks be widescreen (like they are) are desktop, but force them to 4:3 on mobile (so its vertical and not widescreen, just cropped in)

Thanks!

Link to comment

#1.  Thanks, just put the code in.  Whats the code to align it with the side of the screen, on mobile the "Contact" and "About" are in the middle of the screen with the bigger font.

#2. I'm looking to have all my videos play as 21:9 on desktop and 4:3 on mobile.  I'll attach a screen shot of what I'm thinking.

So when people are on my website on mobile, the videos crop in and play vertical.  But when they play on desktop, they play in there full 21:9 widescreen form.

Thanks!  Your helping me sooo much.

IMG_3901 2.jpg

Screenshot 2024-01-18 at 1.13.20 PM 2.jpg

Link to comment

#1. No the position is perfect.  Contact needs to move in to the left more and About needs to move into the right more.  (I labelled the reference photo as #1 with red marker)

#2. This video and all the other videos on my website, I want them to scale up to be vertical videos on mobile, but stay horizontal for desktop.  (Labelled as #2 with red marker in the attachments) 

#3.  Oh guess it fixed itself, looks good now!

IMG_3908 2.jpg

IMG_3909 2.jpg

Link to comment

Never mind!  I solved #2 by putting videos as section background instead of video blocks.  Works much better and is fully scaleable in both mobile and desktop.

Still need help with #1

 

#3 And also, as the final piece of the website.  How do i edit the top bar spacing in mobile.  There is to much white border. 

IMG_3913.jpg

Link to comment

#1. Add transform-origin to this code

div.header-nav-item:last-child {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translatey(-100%) rotate(-90deg);
    transform-origin: 30% 100%;
}
div.header-nav-item:nth-last-child(2) {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translatey(-100%) rotate(90deg);
    transform-origin: 73% 100%;
}

#3. 

div.header-announcement-bar-wrapper {
    padding-top: 2px !important;
    padding-bottom: 20px !important;
}

 

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 1/21/2024 at 3:51 PM, OwenBelanger said:

How do i make this gap smaller also.  

 

IMG_3918.jpg

You can use this CSS code

@media screen and (max-width:767px) {
div.header-announcement-bar-wrapper {
    padding-bottom: 1vw !important;
}
}

 

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

Thanks!  That site style is done thanks to you!  

I'm just comparing 2 separate types of Nav.s.  And what people like more.

How would i get a Nav like this.  Stacked over the left side of the screen, floating and sticky. 

 

No rush with this one, i now i keep asking endless questions haha.

Screenshot 2024-01-23 at 5.42.50 PM.png

Link to comment
  • 3 months later...
On 1/15/2024 at 10:11 PM, tuanphan said:

#1. You can add this code to Website Tools (under Not Linked) > Custom CSS

@media screen and (max-width:991px) {
.header-display-desktop {
    display: flex !important;
}
.header-display-mobile {
    display: none;
}
.header-burger {
    display: none;
}
.header-nav {
    display: flex !important;
}
.header-nav {
    display: flex !important;
    flex: 70% !important;
    justify-content: flex-end;
}
    
.header-title-logo {
    text-align: center;
}}

#2. Move these items to float left/right of screen?

image.thumb.png.a7678437ebf16a5b74e91b42d08c3087.png

 

Thanks so much! This worked great @tuanphan but the navigation menu floats off too far to the right, any suggestions? See screenshot of code and mobile, site is: https://www.eucalyptusfilms.com/

 

Screenshot 2024-05-16 at 8.14.37 AM.png

Link to comment
19 hours ago, skcmarketing said:

 

Thanks so much! This worked great @tuanphan but the navigation menu floats off too far to the right, any suggestions? See screenshot of code and mobile, site is: https://www.eucalyptusfilms.com/

 

Screenshot 2024-05-16 at 8.14.37 AM.png

Change to this code

@media screen and (max-width:991px) {
.header-display-desktop {
    display: flex !important;
}
.header-display-mobile {
    display: none;
}
.header-burger {
    display: none;
}
.header-nav {
    display: flex !important;
}
.header-nav {
    display: flex !important;
    flex: 70% !important;
    justify-content: flex-end;
}
  .header-title {
    flex: 1 0 50% !important;
}  
.header-title-logo {
    text-align: center;
}}

 

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

Create an account or sign in to comment

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

×
×
  • 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.