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

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!

You mean add nav items under logo? How about "Contact" item?

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.

#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?

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.

This website has a good example of the side sticky buttons im after! 

https://www.alimsabir.com/discipline/director

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

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

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!

#1. Use this CSS code

div.header-nav-item:nth-last-child(-n+2) a {
    color: #f1f !important;
    font-size: 50px;
    font-weight: bold;
}

#2. Which video are you referring to?

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

#3.  How do i center the Nav for mobile and desktop under the logo, its a bit to the right.

#1. You mean align work to bottom of screen and contact to top of screen (like your arrow in screenshot)?

#2. I meant where is video?

#3. I think it is fine..

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

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. 

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

How do i make this gap smaller also.  

On 1/21/2024 at 3:51 PM, OwenBelanger said:

How do i make this gap smaller also.  

 

You can use this CSS code

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

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.

Use this CSS code

nav.header-nav-list {
    flex-direction: column;
}

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?

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/

 

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/

 

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