https://www.optimizetemplates.com/ 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 → https://www.youtube.com/watch?v=DwmTSevXv28
**If you’re an existing OP customer, I’ve answered some of the top FAQ’s about OP3 here → https://www.khaimun.com/optimizepress-3-faqs/
***I’ve also shared the 5 things you MUST know when you’re building your page with OP3 → https://www.khaimun.com/5-things-you-must-know-about-optimizepress-3-builder/
****Here are 3 effective ways to help you build better and faster marketing pages with OP3 → https://www.khaimun.com/3-ways-to-build-marketing-pages-with-optimizepress-3/
*****If you haven’t heard of OP before, you can find out more here → https://www.optimizetemplates.com/go/optimizepress
