Jump to content

How to code desktop home page navigation tabs and social links to be positioned vertically on right side of home page and absolute 7.1?

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://kale-seahorse-tty9.squarespace.com/

Hello my name is Sean and thank you in advance for helping me. 

***Website is almost done, I am open to any suggestions beyond my original questions to make this look like a professional did it. I am not a coder at all.***

QUESTION:
I am trying to vertically stack navigation page tabs and social media icons on the right of the screen that doesn't move just for my home page. 

I have spent a coupe of days trying to figure out how to do this with code but have not found any online resources to do this. 

To clarify:
This website has multiple pages (not a single page website). 

  • https://www.will-myers.com/products/p/sidebar-page-navigation
    • I have looked at purchasing this but not 100% sure if this is only used for a one page website or if it can be used for multipage websites???
    • I want my normal navigation tabs and social media links to be:
      • stacked vertically just like Will's plugin shows them
        • only on home page of desktop
        • on right side-vertically centered to homepage background video
          • keep links on top of video
        • positioned absolute so they don't move as you scroll down
        • preferably transparent background so it's over the video
          • potentially might want it to hover because of the video background making it sometime difficult to read the nav texts
            • I am open to all suggestions with formatting because of the video background 
  • https://www.rebeccagracedesigns.com/blog/vertical-navigation-squarespace-7-1
    • I have also looked at this and tried this code but it's not exactly what I want and I don't know how to change the code to make it how i want it. 

Other information:
I am not in love with the exact layout of the header options 7.1 offers.
I for sure want the company title centered at the top and have the background video playing when people land on the page.  
I am open to suggestions on how to customize the layout of nav tabs, social media links, and contact us button.  I just need it to lay nicer on the page so it's easy for prospects to see and utilize better. 

I made the website public if you need the password to get in there I can add you as a contributor. Thank you so much!

Sean

 

FIMP Home Page nav example_03.27.22.jpg

Link to comment
  • Replies 8
  • Views 440
  • Created
  • Last Reply

Top Posters In This Topic

Try adding to Design > Custom CSS

/* Nav */
@media screen and (min-width:992px) {
body.homepage nav.header-nav-list {
    position: fixed;
    flex-direction: column;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
}
}

Is that what you want? If it is, we will deal with the icons later

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 3/27/2022 at 3:21 PM, Adamec said:

Site URL: https://kale-seahorse-tty9.squarespace.com/

Hello my name is Sean and thank you in advance for helping me. 

***Website is almost done, I am open to any suggestions beyond my original questions to make this look like a professional did it. I am not a coder at all.***

QUESTION:
I am trying to vertically stack navigation page tabs and social media icons on the right of the screen that doesn't move just for my home page. 

I have spent a coupe of days trying to figure out how to do this with code but have not found any online resources to do this. 

To clarify:
This website has multiple pages (not a single page website). 

  • https://www.will-myers.com/products/p/sidebar-page-navigation
    • I have looked at purchasing this but not 100% sure if this is only used for a one page website or if it can be used for multipage websites???
    • I want my normal navigation tabs and social media links to be:
      • stacked vertically just like Will's plugin shows them
        • only on home page of desktop
        • on right side-vertically centered to homepage background video
          • keep links on top of video
        • positioned absolute so they don't move as you scroll down
        • preferably transparent background so it's over the video
          • potentially might want it to hover because of the video background making it sometime difficult to read the nav texts
            • I am open to all suggestions with formatting because of the video background 
  • https://www.rebeccagracedesigns.com/blog/vertical-navigation-squarespace-7-1
    • I have also looked at this and tried this code but it's not exactly what I want and I don't know how to change the code to make it how i want it. 

Other information:
I am not in love with the exact layout of the header options 7.1 offers.
I for sure want the company title centered at the top and have the background video playing when people land on the page.  
I am open to suggestions on how to customize the layout of nav tabs, social media links, and contact us button.  I just need it to lay nicer on the page so it's easy for prospects to see and utilize better. 

I made the website public if you need the password to get in there I can add you as a contributor. Thank you so much!

Sean

 

FIMP Home Page nav example_03.27.22.jpg

@tuanphan 
 

It didn't change anything for some reason. Would you like my login info to look further? 
Thank you so much for helping me. Going crazy trying to figure this stuff out. 

Link to comment

@rebeccamousseau

I did and I really like the layout!
Is there a way to have the background very semi translucent so the video background is not hidden and have the company logo in the top center?  
I have no problem buying this just want it to work how I want it too because there are no refunds. 
Thanks for the comment!

Link to comment
On 3/30/2022 at 12:15 AM, Adamec said:

@rebeccamousseau

I did and I really like the layout!
Is there a way to have the background very semi translucent so the video background is not hidden and have the company logo in the top center?  
I have no problem buying this just want it to work how I want it too because there are no refunds. 
Thanks for the comment!

Can you take a screenshot of problem? We can check easier

or you can contact plugin author for problem related plugin

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

Hey Tuanphan thanks for the response.
Website: https://kale-seahorse-tty9.squarespace.com/

I ended up doing some rearranging on my header.
- I removed the social icons and will put them in the footer
- moved the header button a little lower down the page/out of the header
- moved the navigation list to the bottom of the media screen as best as I could in a row and added a hover effect. 

Here is the CSS code I am using. I have a couple of questions I could use some help with below code. 

______________________________________________________________

// Custom Home Page Navigation //

@media screen and (min-width:768px) {

body.homepage .header-nav-list {
  width: 100%;
  padding: 25px;
  background: rgba(247, 248, 250,.1);
  margin: 0px;
  position: absolute;
  left: -25px;
  right: 0px;
  top: 460px;
  z-index: 999;
  display: row;
  }
  /* Nav item hover color - underline */
.header-nav-item a:hover {
    color: rgba(247, 248, 250,1) !important;}
}

_____________________________________________________________

 

Two Navigation customizations I would like some help with please:

1. How do I to tell the navigation list row to be at the bottom of the video screen no matter what size screen someone is using excluding mobile? Right now if I did nothing to the code but added "Bottom: 0px;" the nav list moves up under my tagline. I assume this all has to do with cascade, specificity, and inheritance of the template I am using. I have hardly scraped the surface of understanding these concepts. I'd like to have nav list at the bottom of the video screen and not be able to move when scrolling on screen vertically. 

2. How do I code the css to make the nav list background/padding to be rounded? Currently, is a rectangle shaped. 

Last side question:

In the original code you gave me above you had the min-width: (min-width:992px). I was wondering if I have my code set to (min-width:768px) how that might be a potential issue for anything or what your thoughts are on me using 768px. 

Thank you very much for your help. I did PM you my login info if you need it. 

Link to comment
  • Solution
7 hours ago, Adamec said:

Hey Tuanphan thanks for the response.
Website: https://kale-seahorse-tty9.squarespace.com/

I ended up doing some rearranging on my header.
- I removed the social icons and will put them in the footer
- moved the header button a little lower down the page/out of the header
- moved the navigation list to the bottom of the media screen as best as I could in a row and added a hover effect. 

Here is the CSS code I am using. I have a couple of questions I could use some help with below code. 

______________________________________________________________

// Custom Home Page Navigation //

@media screen and (min-width:768px) {

body.homepage .header-nav-list {
  width: 100%;
  padding: 25px;
  background: rgba(247, 248, 250,.1);
  margin: 0px;
  position: absolute;
  left: -25px;
  right: 0px;
  top: 460px;
  z-index: 999;
  display: row;
  }
  /* Nav item hover color - underline */
.header-nav-item a:hover {
    color: rgba(247, 248, 250,1) !important;}
}

_____________________________________________________________

 

Two Navigation customizations I would like some help with please:

1. How do I to tell the navigation list row to be at the bottom of the video screen no matter what size screen someone is using excluding mobile? Right now if I did nothing to the code but added "Bottom: 0px;" the nav list moves up under my tagline. I assume this all has to do with cascade, specificity, and inheritance of the template I am using. I have hardly scraped the surface of understanding these concepts. I'd like to have nav list at the bottom of the video screen and not be able to move when scrolling on screen vertically. 

2. How do I code the css to make the nav list background/padding to be rounded? Currently, is a rectangle shaped. 

Last side question:

In the original code you gave me above you had the min-width: (min-width:992px). I was wondering if I have my code set to (min-width:768px) how that might be a potential issue for anything or what your thoughts are on me using 768px. 

Thank you very much for your help. I did PM you my login info if you need it. 

#1. Don't remove any code in your current code. Add this to Design > Custom CSS

nav.header-nav-list {
    top: calc(~"100vh - 150px") !important;
    border-radius: 20px;
}
body.homepage article section:first-child {
    height: 100vh !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

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.