{"id":1925,"date":"2015-07-23T12:00:34","date_gmt":"2015-07-23T17:00:34","guid":{"rendered":"http:\/\/www.ragesw.com\/blog\/?p=1925"},"modified":"2018-04-10T02:20:50","modified_gmt":"2018-04-10T07:20:50","slug":"how-to-make-fixed-headers-in-everweb","status":"publish","type":"post","link":"https:\/\/www.ragesw.com\/blog\/2015\/07\/23\/how-to-make-fixed-headers-in-everweb\/","title":{"rendered":"How to Make Fixed Headers in EverWeb"},"content":{"rendered":"

EverWeb 1.8 has a host of new features that give you more design flexibility than ever. In the example below, we are going to use a combination of three of these new features – \u2018Always on Top\u2019, \u2018Fixed Position\u2019 and \u2018Full Width\u2019 – to create a fixed header. With a fixed header \u00a0your web page contents slide under the the ‘fixed’ header as you scroll up and down the page.<\/p>\n

In this example, we will create a Master Page using the Spa template from EverWeb\u2019s template library. The Master Page can then be applied to any web page in your website project.<\/p>\n

    \n
  1. To start, add a new Master Page. Click on the \u2018New Master Page\u2019 button or select File-> New Master Page\u2026\u2019 from the menu. This example uses \u00a0the \u2018Home\u2019 template of the Spa theme. Once you have created the Master Page, double click on its name and over type it with \u2018Spa Master Page\u2019.<\/li>\n
  2. In the Page Inspector, set the \u2019Header Height\u2019 to 160.<\/li>\n
  3. As this is a Master Page, remove any objects that are in the body of the page. Your page should look similar to the screenshot below.\"spa1\"<\/a><\/li>\n
  4. To add a Navigation Menu to the header, just drag and drop the Navigation Menu Widget in to the Header section. Place, size and style all the objects that are in the header as desired such as shown below.\"spa2\"<\/a><\/li>\n
  5. Select all the objects in the header and then tick the checkbox \u2018Fixed Position\u2019 in the Metrics Inspector This will keep the objects in place when you scroll up and down the web page.<\/li>\n
  6. Use the Shapes button in the Toolbar to add a rectangle to the page. In the Metrics Inspector tick the checkboxes \u2018Full Width\u2019 and \u2018Fixed Position\u2019. The rectangle will be stretched across the full width of the screen.<\/li>\n
  7. Move the rectangle to the top of the the page and set the height of the rectangle so that it is meets the bottom border of the header as shown below. Remember that you may need to hold the Cmd key down to\u00a0move the rectangle from the body of the page into the header.\"spa3\"<\/a><\/li>\n
  8. As the rectangle now obscures the other objects in the header (as in the above screenshot) select Arrange-> Send to Back from the menu to place it behind all of the header objects.<\/li>\n
  9. With the rectangle now in place change it\u2019s color as desired using the Fill section of the Shapes Options.<\/li>\n
  10. To complete the Master Page, select all of the objects in the header. Select Arrange->\u00a0 Always on Top from the menu.The reason for using \u2018Always on Top\u2019 is that Master Page objects normally lie underneath the contents of web pages. In our example, however, we need the Master Page header objects to be on top so that web page contents can slide beneath them. \u2018Always on Top\u2019 is how we can force objects to be on top of everything else in order to achieve the effect we want.<\/li>\n
  11. Once your Master Page is complete, create a web page and attach the Master Template \u2018Spa Master Page\u2019 using the \u2018Master Template\u2019 dialog box in the Page Inspector. Add the content that you want to include in the body of the page.\u00a0As you scroll up and down the body contents, the contents will slide under the header.<\/li>\n
  12. When you have completed your page, use Preview to see how the page looks before you commit to publishing it on the Internet. You can see the results of scrolling in the screenshots below.\n
    \"The<\/a>

    The initial view of the page…<\/p><\/div>\n


    \n<\/a><\/li>\n<\/ol>\n

     <\/p>\n

    \"spa5aa\"<\/a>

    … and the effect when scrolling down the page.<\/p><\/div>\n


    \n<\/a>
    \n<\/a>
    \n<\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"

    EverWeb 1.8 has a host of new features that give you more design flexibility than ever. In the example below, we are going to use a combination of three of these new features – \u2018Always on Top\u2019, \u2018Fixed Position\u2019 and \u2018Full Width\u2019 – to create a fixed header. With a fixed header \u00a0your web page […]<\/p>\n","protected":false},"author":844,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[252,247],"tags":[],"class_list":["post-1925","post","type-post","status-publish","format-standard","hentry","category-everweb-software","category-everweb"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts\/1925","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/users\/844"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/comments?post=1925"}],"version-history":[{"count":10,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts\/1925\/revisions"}],"predecessor-version":[{"id":3628,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/posts\/1925\/revisions\/3628"}],"wp:attachment":[{"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/media?parent=1925"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/categories?post=1925"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ragesw.com\/blog\/wp-json\/wp\/v2\/tags?post=1925"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}