Mac SEO Blog

We recently released a popular video tutorial that demonstrates how to create a full width header that can resize as the user scrolls down the page. This can make your website have a more modern feel to it, as this type of header is becoming more widely used on professionally built websites.

This effect not only will make your site look and feel more modern, but it also adds a bit of convenience to your website visitors. Rather than having to scroll all the way back up to the top of the page, visitors will be able to access your website’s navigation menu at all times, making it much easier to navigate from page to page.

Check out the video below and see how you can add this feature to your website. The widget can be found at EverWebCodeBox.

Video Transcript

With the help of a very powerful widget, you can add a sticky header that resizes when you scroll down the page of your EverWeb site. Here is an example of a basic sticky header that I will show you how to create in EverWeb.

The widget that we will be using to create this header was developed by a third-party EverWeb widget developer named Roddy. The widget is available for purchase at a modest price on Roddy’s website everwebcodebox.com

You can locate it by clicking on the Widgets 3 link, followed by hovering over Responsive and selecting resize header. Scrolling down this page will show you another example of this widget in use.

In this tutorial I am going to show you how I created this header using the widget. This widget is powerful and comprehensive, so I will be skipping over some of the controls that I don’t need to use or ones that I accept the default values for. I am making sure that I cover the most important aspects of the widget, and provide you with enough information to be able to move forward with creating your own header.

I also want to point out that Roddy actively updates his widgets, so if you see a control in your widget that you do not see here, it is because the widget has been updated after the release of this video.

The header that we will be creating has 4 main parts to it. There is the background, the logo, the text, and the navigation menu.

So starting with a blank page for the purpose of this demonstration, I will drag and drop the widget onto the page. This is what appears by default.

The very first thing I will do is make the header full width. I do this by clicking on the Metrics tab, and then enabling the Full Width option.

I will now click on the Widget Settings tab.

The Background

The first thing I will do to the widget settings is change the background color of the header. This is done by clicking on the color control next to where it says Background. You will also notice that there is a Background B. This is because by default, the background will be a Gradient. Since I want a solid color, I will also make Background B the same color as the one I chose before.

The Logo

Next I am going to add the image. I have already added the image to the assets list, so I just need to click on Choose and then select it.

My logo appears much smaller than I want, so I will adjust the value next to width, until my desired width for my logo is displayed.

I also want the logo to be closer to the top of the header, so I will adjust the value next to Top.

The logo is also a bit further to the left than I want it to be so I will adjust the value next to Left.

I will also adjust the Resize Width so that the logo is my desired size once it has been resized.

I will also adjust the Resize Top value so that the logo is a bit further from the top.

The Text

The next thing I will do is replace the heading with my own.

I will also type in my desired Font Family. Since this is a Google Font, I will check the option for Google Font.

You will also notice that the text is overlapping with the logo, so I am going to adjust the value next to Left to move it a bit to the right.

I will also modify the resize left value.

The Navigation

The next thing we will do is add the navigation menu. This is done by adding the navigation menu widget by dragging and dropping it onto the header.

Next, I will click on the Metrics tab and enable the Full Width option. Back on the Widget Settings for the navigation menu, I am going to change the alignment from Left, to Right, since my navigation is on the right side of my header. I will also position the navigation menu somewhere around the middle of the header.

I will also click on the Fonts button to open up the fonts window to select my font.

The rest of the modifications that I make to the navigation menu will be done using the controls on the Full Width Resize Widget, so I will click back to that widget, and then select the Widget Settings tab in the Inspector, and then scroll down to the navigation menu section.

I am going to increase the value next to Resize Top so my navigation menu is bit further away from the top.

I will now adjust the link color, as well as the hover color. You will notice that some of the changes made to the navigation menu will not appear in EverWeb. This is normal. Your navigation menu will appear much different when your site is previewed or published.

I also do not want there to be a background for my navigation menu so I will select Transparent background.

I will modify the font size since I want it to be a bit larger.

I am going to decrease the minimum width for the links in the navigation menu because I want this spacing between links to be a bit smaller.

My navigation menu does not contain a drop down menu so I will skip over the drop down menu style controls.

The last thing I will do is check the boxes to fix the header and navigation and activate the resize on scroll.

We have now just re-created this header.

Just a quick reminder about all of the values that I just set. These values correspond to my logo and the way I want it to appear. Your values will all differ based on the logo and based on how you want your header to look. The way you will determine most of the values that you input will be through trial and error, which is how I determined the values for this header. For most of values that we adjusted, you will be able to see the result of changing the values right away. But for the values that have Resize next to them, you will need to preview the page in order to see the change.

And even though I skipped over some of the controls, you might still find them useful for you, so feel free to play around with them when creating your header.