Jump to content

How to make header drop down menu horizontal not vertical

Recommended Posts

  • Replies 17
  • Views 2.6k
  • Created
  • Last Reply

Top Posters In This Topic

Add to Design > Custom CSS

/* Nav dropdown */
.header-nav-folder-content {
    width: 100% !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    justify-content: flex-end;

}
.header-nav-folder-content div {
    margin-right: 20px;
}
.header-nav .header-nav-item--folder {
    position: static;
}

 

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

For some reason when I entered this, the width of the drop down menu didn't go 100% across the screen. It stopped an inch from the edge on both sides as if there were margins.

When I changed it to 120% it went all the way to the left edge but the right edge kept the 1" margin.

Link to comment
7 hours ago, TFWC said:

For some reason when I entered this, the width of the drop down menu didn't go 100% across the screen. It stopped an inch from the edge on both sides as if there were margins.

When I changed it to 120% it went all the way to the left edge but the right edge kept the 1" margin.

You want to space out all dropdown items?

image.thumb.png.9b4b5433f9d89536bf4ad1a24e731f89.png

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

I've been working on a duplicate site behind the scenes. I just published it so you can see what I'm talking about. Check www.twinforkswindow.com now and you'll see the menu drop down doesn't go all the way to the edge of the screen on the right hand side.

Additionally can you help me change the curser icon on the homepage when it hovers over the slideshow gallery. I'd like it to look like a standard cursor pointer instead of a hand icon. Thank you!

Link to comment
17 hours ago, TFWC said:

I've been working on a duplicate site behind the scenes. I just published it so you can see what I'm talking about. Check www.twinforkswindow.com now and you'll see the menu drop down doesn't go all the way to the edge of the screen on the right hand side.

Additionally can you help me change the curser icon on the homepage when it hovers over the slideshow gallery. I'd like it to look like a standard cursor pointer instead of a hand icon. Thank you!

try this new code

/* Nav dropdown */
.header-nav-folder-content {
    width: 100% !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    justify-content: center;
width: 3000px;
position: relative;
    left: -25% !Important;
}
.header-nav-folder-content div {
    margin-right: 20px;
}
.header-nav .header-nav-item--folder {
    position: static;
}
/* slideshow cursor */
.gallery-fullscreen-slideshow * {
    cursor: initial;
}

#2. You can upload svg to your site & replace below code url with svg url

/* Header logo */
header#header img {
    content: url(https://cdn.pixabay.com/photo/2022/03/22/18/24/flowers-7085710__480.jpg);
}

 

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

I also got a broken link where my logo is supposed to be. I typed "SVG" in a textbox on a hidden page on my site then linked the svg logo to that text. I then highlighted the link and added it to the code you sent where the url goes.

Screen Shot 2022-04-05 at 9.58.56 AM.png

Link to comment
19 hours ago, TFWC said:

I also got a broken link where my logo is supposed to be. I typed "SVG" in a textbox on a hidden page on my site then linked the svg logo to that text. I then highlighted the link and added it to the code you sent where the url goes.

Screen Shot 2022-04-05 at 9.58.56 AM.png

#1. Seeing

#2. Can you send the code after you added new link?

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

I changed the logo back to the .jpeg image because I can't leave a broken link icon as my header all day.

Below is the code. The svg image is linked to text on a page that I don't have viewable to the public. When I enabled the page so that it was viewable to the public, the logo was still a broken link.

 

/* Header logo */
header#header img {
    content: url(/s/Website-Header-Logo-3-d4yb.svg);
}
Link to comment
On 4/6/2022 at 8:56 PM, TFWC said:

I changed the logo back to the .jpeg image because I can't leave a broken link icon as my header all day.

Below is the code. The svg image is linked to text on a page that I don't have viewable to the public. When I enabled the page so that it was viewable to the public, the logo was still a broken link.

 

/* Header logo */
header#header img {
    content: url(/s/Website-Header-Logo-3-d4yb.svg);
}

With code in Custom CSS, you need to enter Full image url

It should be

/* Header logo */
header#header img {
    content: url(https://www.twinforkswindow.com/s/Website-Header-Logo-3-d4yb.svg);
}

 

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
  • 2 weeks later...

I did this and it worked but for some reason the svg logo still looks blurry on my 32" desktop. Perhaps its the size of the svg file? When I open TextEdit on my Mac I see the size is width=2409.0pt height=295.0pt. Maybe the larger desktop is having trouble scaling? It looks great on my 16" MacBook Pro.

Link to comment
  • 8 months later...
On 4/3/2022 at 4:34 PM, tuanphan said:

Add to Design > Custom CSS

/* Nav dropdown */
.header-nav-folder-content {
    width: 100% !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    justify-content: flex-end;

}
.header-nav-folder-content div {
    margin-right: 20px;
}
.header-nav .header-nav-item--folder {
    position: static;
}

 

Hi tuanphan, thanks so much for your updated. I'm a big fan of your code, really helpfull ! 

 

I'm trying to add this one to my website but the dropdown gets align to the right. Any idea of how to ajust it to the correct position ? 

The dropdown should be aligned / centered with "Collection" from the main navigation. 

Thanks for any help you can provide

image.thumb.png.256d2929e3c83893ed3078b01d46dbd4.png

Link to comment
On 1/14/2023 at 11:04 PM, peterlimapires said:

Hi tuanphan, thanks so much for your updated. I'm a big fan of your code, really helpfull ! 

 

I'm trying to add this one to my website but the dropdown gets align to the right. Any idea of how to ajust it to the correct position ? 

The dropdown should be aligned / centered with "Collection" from the main navigation. 

Thanks for any help you can provide

image.thumb.png.256d2929e3c83893ed3078b01d46dbd4.png

What is your site url? 

But I think you can remove this line first

justify-content: flex-end;

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
  • 1 year later...

Hello, I'm also trying to create a flyout menu with horizontal menu items (and a new color background), I tried all of the code suggestions here and this is what I get. See screenshot. I wonder why it's not taking. We are on Squarespace Advanced eCommerce.

header code.png

Niya Christine 

Squarespace Circle Developer

Link to comment

Your screenshot shows some CSS. This should be inserted into the Custom CSS panel (find it here), not the Code Injection panel 🙂.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

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.