In this tutorial, I’m going to show you step-by-step how you can create a header menu from scratch using the WP Menu element in OP3 lightning builder.

You can see how powerful and customizable it is to create a responsive header menu in the new OP3 compared to OP2.

Breakdown of this tutorial video:

00:06 – Section/Row/Column layout creation
00:38 – Adding Image element (logo)
00:54 – Adding WP Menu element (Preset 3)
03:08 – Tablet optimization
04:30 – Mobile optimization
05:47 – Header menu live preview

Note that the header design is similar to the ‘Logo With Alongside Navigation’ header style in OP2.


[How To Make The OptimizePress 3.0 Header Menu ‘Sticky’?]

Follow the 5 steps below to make your header menu ‘sticky’:

Step 1) Increase the spacing below the header Section (could be the next Section/Row).

Step 2) Assign a background color to the header Section via Background Options (image icon) **Remember to adjust the Opacity, set 100% if you just want a solid color.**

Step 3) Then go to Advanced Settings (cogwheel icon) of the header Section, click Advanced Options → Advanced → assign a name to CSS Classes (e.g. sticky). Set the Z-Index to 100.

Step 4) At the top, go to Settings (cogwheel icon). Under Custom CSS, enter the following code…

.sticky {
position: fixed;

5) Click Save and preview your page.


*If you don’t want the hassle of building the header menu from scratch, I’ve created 3 pre-made and pre-optimized header sections (Basic, Overlay, and Business) to help you save time. You can find the 3 demos and payment details here →

**If you’re an existing OP customer, I’ve answered some of the top FAQ’s about OP3 here →

***I’ve also shared the 5 things you MUST know when you’re building your page with OP3 →

****Here are 3 effective ways to help you build better and faster marketing pages with OP3 →

*****If you haven’t heard of OP before, you can find out more here →

Leave a Reply

Your email address will not be published.