GSehr Posted August 5, 2020 Share Posted August 5, 2020 Site URL: http://www.openonabeach.com Hi, I'd like to create a transparent header with a frozen hamburger menu on desktop -- in the York template. What I'd like it to look like, for reference: www.astegutierrez.com Is that possible? Have tried code from other forums for other templates and they didn't work for my site. Thanks in advance! Link to comment
GSehr Posted August 6, 2020 Author Share Posted August 6, 2020 @tuanphan any idea how to solve this? Thanks in advance! Link to comment
RyanDejaegher Posted August 6, 2020 Share Posted August 6, 2020 @GSehr are you just wanting the hamburger menu to be visible on desktop? Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
GSehr Posted August 6, 2020 Author Share Posted August 6, 2020 @RyanDejaegher yes, currently it's only visible if my browser window is smaller than a certain size. I'd love if I could freeze the hamburger menu all the time on desktop. Also, if you know how to fix the transparent header / logo on desktop, that would be amazing too. Link to comment
RyanDejaegher Posted August 6, 2020 Share Posted August 6, 2020 @GSehr, when you say fix the transparent header are you wanting it to always be visible and overlay the page as you scroll? Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
GSehr Posted August 6, 2020 Author Share Posted August 6, 2020 @RyanDejaegher yes, I want to visually remove the separate header bar entirely so that just the logo and hamburger menu are hovering over the top project and scroll down with the site. Like on this site: www.astegutierrez.com Link to comment
Solution RyanDejaegher Posted August 6, 2020 Solution Share Posted August 6, 2020 (edited) @GSehr You can add this to your custom CSS to fix the header throughout the page. Getting the hamburger styles requires quite of overrides to get the hamburger to work on the desktop view #header { position: fixed; width: 100%; background: rgba(255,255,255,0.8); margin: 0; padding: 2vw 4vw; top: 0; } @media (min-width: 768px) { #page { margin-top: 4vw } } Edited August 6, 2020 by RyanDejaegher Modified code GSehr 1 Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
GSehr Posted August 6, 2020 Author Share Posted August 6, 2020 @RyanDejaegher thanks, I appreciate that. I put the code in, but it looks like all it did is push the margins in a bit. Can't seem to figure out how to make it transparent. Link to comment
RyanDejaegher Posted August 6, 2020 Share Posted August 6, 2020 @GSehr I changed the code above so the background color should be semi transparent now GSehr 1 Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
GSehr Posted August 7, 2020 Author Share Posted August 7, 2020 @RyanDejaegher thank you so much for that! Your comment inadvertently taught me how to edit the code a bit too 🙂 adjusted the transparency to 0.0 and removed the top margin and now it's looking how I want it. Much appreciated!! RyanDejaegher 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment