How to make header drop down menu horizontal not vertical

Site URL: https://www.twinforkswindow.com

I'm trying to make my dropdown menu look like https://www.ramsa.com. If you hover over "About" you see a horizontal drop down menu instead of vertical. I also would like it to be semi-translucent white like RAMSA.

Thank you!

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

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.

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?

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!

Also, when I view my website on my 32" desktop monitor the logo gets blurry. So I'm trying to change the logo from a png file to a svg file.

I tried using this https://medium.com/kick-point/how-to-add-an-svg-logo-to-your-squarespace-website-d76dc8669679 but it didn't work. I was just left with blank white where the logo is supposed to be.

One last questions, on the mobile site https://www.twinforkswindow.com/fleetwood-mobile when I scroll down from the top the image grows and zooms in and it looks choppy and not smooth. Can you help me make this image static so it doesn't grow when I scroll.

Thanks again for everything.

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

The drop down menu code didn't work. It shifted the submenu all the way to the left and I was unable to click anything because it would disappear when I moved my cursor. I had to change it back.

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.

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.

#1. Seeing

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

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

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

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.

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

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

What is your site url? 

But I think you can remove this line first

justify-content: flex-end;

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.

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