Jump to content

adjusting a dropdown menu to be full screen

Recommended Posts

Site URL: https://puma-tan-gztn.squarespace.com/config/design/custom-css

Hi everyone, I'm working on this website and I'm struggling to get the drop down menu to do what I want to do. I'm looking to make it so that when you hover over "works" the srop down menu covers the entire screen with a high opacity white box, and have the text right justified inline with the 's' on works. I've managed to make the dropdown the right colour and can make it full screen but for the life of me cannot get the text to line up AND the the white to be full screen. I can get one or the other but not both.


Link to comment
  • 2 weeks later...
  • Replies 1
  • Views 955
  • Created
  • Last Reply

Hi. It looks like you solved this with CSS

@media screen and (min-width:769px) {
.subnav {
    background-color: rgba(255,255,255,.9) !important;
    text-align: right !important;
    transform: translatex(-90%) translatex(229.578px) !important;
    width: 110vw !important;
    height: 100vh !important;


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


This topic is now archived and is closed to further replies.

  • 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.