navigation bar and full bleed logo image

[Joaquin Soler]

two questions:

1. how do I add a static navigation bar in the top right of the home page?

2. if i am using an image for my logo, how do i get it to be full bleed across like the other images?

Thanks!

Sarah

[Bill Robbins]

Joaquin,

Thank you for your business first of all. Let’s see if we can answer your questions.

Static Navigation

To add in a static navigation bar, go to the Theme Options page and select the Styling tab. Scroll down to the Custom CSS box and paste this:

#header {
	position: fixed;
	width: 100%;
	box-sizing: border-box;
	background-color: #cccccc;
	padding-right: 2%;
	padding-left: 2%;
}

You’ll want to change the background color from #cccccc to the color you’d like to use behind your navigation. Once you’ve done that, save your changes. That will add in a fixed navigation bar.

---

Full Width Logo

After you make the navigation bar fixed to the top, you can then use this snippet in the Custom CSS box too and that will cause the logo image to be full width, just above the navigation items:

#logo {
	float: none;
	width: 104%;
	margin-left: -2%;
}

nav#navigation {
	float: none;
}

#header {
	padding-bottom: 20px;
}

Update your settings. That will make the logo span the full width of the site. It will also cause the navigation to slide down below it and span the full width too.

If you have any questions or trouble, let me know,
Bill

[Author]

Posts