Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Changing Nav Header and Logo on product page.


donovanc

Question

Hey guys, I really need some help. I'm trying to change around the sizing and position of my logo and nav bar on my site, but only on the product pages. I know how to do this on a regular page where I can use a code block on the page to target just that Pages header, but because It's a product page and theres no way for me to inject code into the header or add a code block, Im at a loss. Any help would be greatly appreciated. I want the logo to be smaller and on the far left followed by the three nav links to the right of it.  

Screen Shot 2020-11-10 at 11.25.21 PM.png

Link to post
  • Answers 36
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

@creedon This worked absolutely amazingly, the margin edit is perfect as well, I have been able to position the banner just how I like it. Honestly, this is like magic, I have no idea how you did

Hey guys, I really need some help. I'm trying to change around the sizing and position of my logo and nav bar on my site, but only on the product pages. I know how to do this on a regular page where I

Can I also ask this question? I have my navigation set to transparent, but on pages such as blog post, and product pages, where I can't add a banner image and the background is white, I can't see my w

Posted Images

Recommended Posts

  • 0
11 hours ago, Kesia said:

And I place this in design -> css code ? 

 

Can´t get any of them to work :s

have you put it in Design_>Custom css section?

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
12 hours ago, creedon said:

@Kesia

Yes the code goes in Design > Custom CSS. Even if it doesn't appear to work leave it in there for diagnoses.

Yes the code is there, but not seem to work :s Any suggestion? 🙂

Link to post
  • 0
11 hours ago, creedon said:

@Kesia

It appears to be working to me.

1478685990_ScreenShot2021-03-17at2_19_16PM.png.4a90e2944968a1c233fbefac88348203.png

 

1252743_ScreenShot2021-03-17at2_20_27PM.png.236ebcb600566f9bea15605b3c07e96c.png

 

Yes I got the header to work 😄 

But the dropdown menu on all the detail product pages are still on a white background so you can´t see anything. 

Link to post
  • 0
On 3/18/2021 at 4:25 PM, Kesia said:

Yes I got the header to work 😄 

But the dropdown menu on all the detail product pages are still on a white background so you can´t see anything. 

Hi. I see dropdown blue here. It looks like you solved this?

 

Link to post
  • 0
11 hours ago, tuanphan said:

Hi. I see dropdown blue here. It looks like you solved this?

 

No, on the detail product pages it´s still white. 

 

IMG_6622.JPG

Link to post
  • 0
19 hours ago, SaraSara said:

@Park_Brewing_Company your site looks amazing. Specially,I like the animation on hover of navigation menu.How could you make it? 😃

Just did this for a site. You can use this CSS

/* nav items hover */
.header-nav-item>a:after {
    content: '';
    background: rgba(255,0,159,.5);
    height: 10px;
    width: 0;
    display: block;
    transition: width 1s;
    position: relative;
    top: -10px;
}
.header-nav-item>a:hover:after {
    width: 100%;
    transition: all 0.3s;
}
.header-nav-folder-item a:hover {
    background: rgba(255,0,159,.5);
}

 

Link to post
  • 0
20 hours ago, tuanphan said:

Just did this for a site. You can use this CSS


/* nav items hover */
.header-nav-item>a:after {
    content: '';
    background: rgba(255,0,159,.5);
    height: 10px;
    width: 0;
    display: block;
    transition: width 1s;
    position: relative;
    top: -10px;
}
.header-nav-item>a:hover:after {
    width: 100%;
    transition: all 0.3s;
}
.header-nav-folder-item a:hover {
    background: rgba(255,0,159,.5);
}

 

You are amazing 🙂 thank a bunch 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...