Jump to content

Custom Navigation on Index Page

Recommended Posts

Site URL: http://www.southernsunevents.com

http://www.southernsunevents.com

PW: sse2020

 

My home page has the logo featured on the banner image and the traditional logo spot hidden via css. I've got my nav links spaced apart as I want them like this:

 

460971527_ScreenShot2021-07-21at9_22_31PM.thumb.png.6b096c11a287a945d22c2b47a3ce58b5.png

 

I want the typical top center logo for the rest of my pages but it's knocking down my nav links because they are too big based on how I've set them for the home page layout. 

148882822_ScreenShot2021-07-21at9_25_11PM.thumb.png.a9a2cd520143446a5403daf83fc6471d.png

Is there a way to customize the nav links just for the index page and have everything standard for the rest of my pages? Thanks!

Link to comment
  • Replies 14
  • Created
  • Last Reply

Top Posters In This Topic

 

On 7/23/2021 at 5:16 PM, SouthernSunEvents said:

Looking for an example of code for this as I'm not savvy enough to write my own css yet. 

Add to Design > Custom CSS

body:not(.homepage) .Header-nav-inner {
    white-space: nowrap;
}
body:not(.homepage) a.Header-nav-item:first-child {
    margin-right: 2em !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 7/24/2021 at 10:35 PM, tuanphan said:

 

Add to Design > Custom CSS

body:not(.homepage) .Header-nav-inner {
    white-space: nowrap;
}
body:not(.homepage) a.Header-nav-item:first-child {
    margin-right: 2em !important;
}

 

Hey @tuanphan just tested this on a tablet and the menu drop down isn't working. It shows everything fine in my squarespace preview but on my ipad it's showing the desktop nav and breaking it up into two rows.

IMG_0928.PNG

Link to comment
20 hours ago, SouthernSunEvents said:

Hey @tuanphan just tested this on a tablet and the menu drop down isn't working. It shows everything fine in my squarespace preview but on my ipad it's showing the desktop nav and breaking it up into two rows.

IMG_0928.PNG

You want to one line, or force menu burger?

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
20 hours ago, SouthernSunEvents said:

force menu burger, thanks!

Add to Custom CSS

/* desktop menu on tablet */
@media screen and (max-width:900px) {
.Mobile.loaded {
    display: flex !important;
}
header.Header.Header--bottom.Header--overlay {
    display: none;
}
img.Mobile-bar-branding-logo {
    visibility: visible !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
4 hours ago, tuanphan said:
/* desktop menu on tablet */
@media screen and (max-width:900px) {
.Mobile.loaded {
    display: flex !important;
}
header.Header.Header--bottom.Header--overlay {
    display: none;
}
img.Mobile-bar-branding-logo {
    visibility: visible !important;
}
}

This seems to work but then brings back my hidden index page logo on mobile and tablet. I've been using this code for hidden index logo

/* REMOVE MOBILE HOMEPAGE LOGO */

body.homepage .Mobile-bar-branding-logo {

    visibility: hidden;

}

Screen Shot 2021-07-30 at 12.36.28 PM.png

Screen Shot 2021-07-30 at 12.36.39 PM.png

Link to comment
On 7/30/2021 at 11:38 PM, SouthernSunEvents said:

This seems to work but then brings back my hidden index page logo on mobile and tablet. I've been using this code for hidden index logo

/* REMOVE MOBILE HOMEPAGE LOGO */

body.homepage .Mobile-bar-branding-logo {

    visibility: hidden;

}

Screen Shot 2021-07-30 at 12.36.28 PM.png

Screen Shot 2021-07-30 at 12.36.39 PM.png

You want to show logo on tablet + hide logo on mobile?

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 8/2/2021 at 11:19 PM, SouthernSunEvents said:

hide logo on index page of mobile and tablet - so hamburger menu only

Remove this code on code I sent above

Quote
img.Mobile-bar-branding-logo {
    visibility: visible !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.