Can I customize the top of the page to achieve this?

  • I’m not sure if this is possible as I am new to building websites. I currently have the Dara theme installed.

    I seen a website where I really like the design, the hero image was at the very top of the page and the menu was on the hero image but the whole menu bar was a dark transparent overlay on the hero image.

    The website i’m referring to is thesaucekitchen.com.au (not my site)

    Is it possible for a beginner to do this with the dara theme or would it be better for me to find another theme to achieve something similar.

    That site is not a WordPress site and was custom built by a tech company.

    Thanks

Viewing 2 replies - 1 through 2 (of 2 total)

  • Some CSS such as this added into Appearance->Customize->Additional CSS should get it close to what you want otherwise known as a sticky/fixed header

    .site-header {
	padding-top: 10px;
	background-color: white;
}

.site-header .main-navigation {
	background: rgba( 21, 182, 184, .8);
	position: fixed;
	top: 31px;
	z-index: 50;
	width: 100%;
	max-width: 1180px;
	opacity: .5;
	margin: auto;
}

    However, it isn’t 100% as when resizing the browser width it has some display issues. It also appears to affect the mobile version of the menu as well.

    More work could be done with it to optimize but it may be better to search for a theme that already has the fixed/sticky header option built in and implemented properly.

    Thread Starter Calypso

    (@calypso333)

    Thank you so much for taking the time to reply, I appreciate the help!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Can I customize the top of the page to achieve this?’ is closed to new replies.