You can modify the header as needed
- To begin editing the header section:
From any page on the website, hover over 'Edit With Elementor' and click on 'Header Sitewide'
2. The greyed out area is set to 'hidden' so that it does not show on the live page
In this case, the greyed out section is set to not show on desktop devices
Instead, it is set to show on tablets and mobile devices only as shown on the screenshot below
You can change the type of device you want the section to be visible/invisible on by clicking on 'Advanced' then scroll down to 'Visibility'
3. To change the background of the header section, click on the editor handle
On the editor panel that opens on the left click on STYLE
Click on BACKGROUND
Click on the image to choose a new one from your media library or from your computer
4. To set a different background color, e.g green
We would recommend that you first DELETE the default background image by clicking on the small bin icon that appears at the top-right of the image when you hover over it
Then click on the color box to choose your preferred background-color
By following the instructions above you have changed the color of the desktop header only
To change the color of the mobile/tablet header version, start by clicking on the responsive mode icon shown below and choose the respective mode you want to edit
Then change the colors/background as needed and as shown in the [previous] section for the desktop header
5. For the Navigation/Menu items listed here, an icon list widget was used
For the Icon List widget, you can choose to use a display mode called Default or Inline.
Default displays items in a vertical list, while Inline displays items horizontally.
Items On The Icon List
- Text: Enter the list item’s text
- Icon: Select the icon for the item
- Link: Enter the URL for the item’s link. Click the Link Options cog
to either add rel=nofollow to the link or to open the link in a new window.
