Customize navigation dropdown menu

Site URL: https://alpaca-seadragon-j45t.squarespace.com/config/

Hello,

How do I turn the navigation drop down menu bar into an X once i click on it? 

Also how can I make the folder box top line dissapear and become the size the page. Sorry for my bad explanation. For reference please check this website: https://alanajadestudio.com/

Thank you

Hi @Negin, I am not able to see your website, can you check it out? Thanks!

hello,

https://alpaca-seadragon-j45t.squarespace.com/

I have come a bit further with CSS coding. I would like to know how to make borders around the dropdown box on my burger menu? More like a vertical line than runs along the box and fixates the dropdown menu so you cant scroll anymore. Any suggestiions?

@Negin, thank you, but I still can’t access your website as it is set to private:)

my trial has ended, i have no longer access to my website. But this is what i would like to achieve with my burger menu: https://alanajadestudio.com/. 

@Negin, I think you might be looking for this: 

Yes! that is where i partly got my codes from, however I would like to adjust the size and colour of the border of the box and take away the shadow. 

Thank you ❤️

@Negin, I updated the code, you can play with it, see attached screenshot:

.header .header-burger{
display:flex
}
.header-nav, .header-actions {
display:none
}
.header--menu-open .header-menu {
opacity: 1; visibility: visible;
}


.header .header-burger{
display:flex
} 
.header-nav, .header-actions {display:none}
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
width: 50%;
margin-left: 50%;
  border: solid 1px;
}

Thank you so much! Ill try the added code " border" in the upcoming days once i have my website up and running. 

Kind regards, 

Yasmin

@Negin, you’re welcome, let me know how it goes:)