Church Websites - Elementor: Grace: Header

Editing the Header Template

 

Navigate to Templates> Theme Builder> click the "Header" tab Grace | Header> click "Edit with Elementor."

 

The header is made up of 3 columns and background color.

1. Column 1: Logo

The logo shown is the one set as your site wide logo setting. For details about setting this check out this Article: Church Websites - Elementor: How to set your Site Logo and Title

 

2: Column 2: Nav menu

Here you can set how your menu looks - alignment, colors, and styles. Note that on mobile or tablet you may want to change the width of the columns as this turns into a dropdown.

For editing the contents of this nav menu, go to Appearance Menus in the Wordpress dashboard or go there using the "Menus screen" link in the nav edit area:

 

You can change the colors and styles from the styles tab here. Take note that for consistency, "Hover" and "Active" tabs should have the same or similar color for the pointer:

Column 3: Buttons/search widgets

In this column one or two buttons can bring out special links - for best results, these should be very few to work well on mobile.

 

The search form item added here is also set to "Full screen" to not take much space with a search text input:

 

For consistency this overlay in the style is set to the header's background.

 

 

 

 

To adjust positioning of the buttons and search (may be especially needed while checking the mobile view), go to advanced and check the values for margin:

especially while reviewing your edits while in tablet/mobile. Tablet/mobile changes to this adjustment will stay with their respective viewports as noted by the  symbol:

 

 

Background color

To set the background color (or padding, or column gap) select the whole row:

 

and set the background in styling.

For details on all the options available options see the documentation overview.

 

 

 

 

 

 

 

 

 

Updated

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request