York: Freeze Hamburger Menu + Create Transparent Header

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!

@tuanphan any idea how to solve this? Thanks in advance!

@GSehr

are you just wanting the hamburger menu to be visible on desktop?

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

@GSehr, when you say fix the transparent header are you wanting it to always be visible and overlay the page as you scroll?

@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

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

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

@GSehr I changed the code above so the background color should be semi transparent now

@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!!