Side Header Position

When setting up a header in Avada, you can choose to set the position to Top, Left or Right. In this article, we will focus on the Side Header Position (Left or Right) and the different options you can set for them, including the styling options. Continue reading below to learn more about the side header position. If you』d like to read about Headers in general, please refer to our Main Header Setup article.
Main Header SetupTop Header PositionSide Header Position SetupSetting the header to the Left or Right position displays it and the menu items vertically on your site. You won』t be able to choose any header layouts when your header is set to the side, but you can still add header content and adjust the styling.
IMPORTANT NOTE: The header padding and logo margin options will auto adjust based on your Header Position selection for ideal aesthetics.Step 1 – Go to the Avada > Options > Header tab.
Step 2 – In the Header Content sub-panel, set the 『Header Position』 option to Left or Right to display the header on the side.
Step 3 – You can choose to add content to your side header using the Header Content options. Simply choose the content you』d like to display from the dropdown boxes.
Step 4 – Under the Header Styling sub-panel, Set the 『Header Width For Left/Right Position』 option that controls the width of the left or right side of the header. This option accepts a numerical value. For example, 280. You can also customize your side header』s appearance on this sub-panel.
Step 5 – Click the 『Save Changes』 button to apply your changes.
IMPORTANT NOTE: The Header Content 1-3 options will only show on desktop for the side header layouts. They will be hidden on mobile view.Side Position Content AreasAvada includes 3 different content areas for headers, but access to these content areas depends on which header version you choose. Setting a side header allows you access to all 3 Header Content options. Simply select from the dropdown the content you』d like to display, such as Contact Info, Social Links, Navigation, and the like. If you do not want to display any of the Header Content options, simply select the Leave Empty option. Along with these, there are also fields that allow you to enter your own contact details and tagline to be displayed.
Side Header Position StylingYou can customize your header』s appearance by going to the Avada > Options > Header > Header Styling sub-panel. If you would like to add a background image to your side header, then you can do so by going to the Avada > Options > Header > Header Background Image sub-panel. For your background image to appear, your header opacity must be transparent or set to below 1. If you set your header opacity to below 1, then your side header will display a color overlay on your background image.