I am attempting to replicate the header-graphic navigation found on this website:
It appears that they are not using a grid for the header-graphic area, but rather keeping them separated as 2 divs within their Hero block container. I am interested in recreating the large content area with fluid content box and 5 navigation buttons. When you stretch the right side of the browser, the main navigation boxes remain in place while the left area (content) extends fluidly. My goal is to achieve that same look.
Upon inspecting the code from Google Developer Tools, here are the snippets I found:
/* For content navigation area */
.gwc_slide_buttons {
width: 375px;
height: 556px;
right: 0;
position: absolute;
}
/* For content area */
.gwc_slider {
left: 0;
right: 375px;
height: 556px;
position: absolute;
overflow: hidden;
}
This is what my code currently looks like:
/* For content area */
.slider_content {
position: absolute;
}
/* For the content navigation area */
.slider_content_navi {
width: 430px;
position: absolute;
}
As seen here, I have tried using absolute positioning for both my content and navigation button, but it's not functioning as intended based on the inspected code.
Any suggestions or guidance would be greatly appreciated.
You can view a preview on jsFiddle.