Custom Navigation on Index Page

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:

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. 

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!

you can place all of your custom code under the collection ID for your home page - if you only want it to change there.

#collection-5e1df494db2c3e0f98a4c13b{

Customisations go in here

}

7 hours ago, IgnitePerth said:

you can place all of your custom code under the collection ID for your home page - if you only want it to change there.

#collection-5e1df494db2c3e0f98a4c13b{

Customisations go in here

}

Thanks so much. Might you be able to point me in the direction of a code template for this?

11 hours ago, SouthernSunEvents said:

might you be able to point me in the direction of a code template for this?

Can you clarify what you mean by "code template"?

7 hours ago, IgnitePerth said:

Can you clarify what you mean by "code template"?

 

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

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

On 7/24/2021 at 10:35 PM, tuanphan said:

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

Thanks for popping in with this! It works perfect!

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.

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.

You want to one line, or force menu burger?

7 hours ago, tuanphan said:

You want to one line, or force menu burger?

force menu burger, thanks!

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

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;

}

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;

}

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

On 8/1/2021 at 2:46 AM, tuanphan said:

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

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

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