Customizing Divi’s Secondary Menu Bar with a Call to Action

Posted on February 8, 2017 by in Divi Resources | 46 comments

Customizing Divi’s Secondary Menu Bar with a Call to Action

The most important information on your site should exist above the fold (roughly the top 600px of your screen). Divi takes advantage of this concept with their secondary menu bar. The menu bar sits at the very top of your site to showcase important elements like share buttons, a secondary menu, a phone number, and an email address. Users should always be able to find this important information no matter what page they land on and without having to scroll to find it.

If you are looking for your site to generate more signups, offer a discount, or have a page that you’re looking to direct traffic to, this post is for you. We’ll work on creating a call to action (CTA) that is embedded in Divi’s secondary menu bar. There are a few popular plugins like the Hellobar and Sumome’s Smart Bar that are dedicated to capturing leads. I recommend looking into a powerful plugin like these if you are serious about taking lead generation to the next level. But for today I’m keeping it simple.

I’m going to show you how to add a simple CTA to Div’s top bar, without the use of a plugin. I will even show you how to change the position of Divi’s top bar elements. Who knows? You may even decide to use that space for something completely unique.

Let’s get started.

Customizing Divi’s Secondary Menu Bar with a Call to Action

Subscribe To Our Youtube Channel

Implementing the Design with Divi

Adding a Secondary Menu Bar with Header Elements

In the WordPress Admin go to Divi → Theme Customizer. Select Header & Navigation → Header Elements

Under Header Elements, make sure the option to show social icons is unchecked and enter a phone number and an email address in the two text boxes.

Styling the Secondary Menu Bar

Now go back to Header & Navigation and select to customize the Secondary Menu Bar. Make changes to the following settings:

Make Full Width: yes
Text Size: 14px
Font style: TT (uppercase)
Background Color: #eb593c
Dropdown Menu Background Color: #eb593c

Adding the CTA to the header.php file in your child theme

In order to add the CTA section to the top bar, you will need to add a line of html code to the header.php file in the Divi theme folder.

If you haven’t created a child theme yet, it is a good idea to do so before you start making changes to the theme template files. Click here to learn how to add a child theme.

Once you have a child theme created and active on your site, access your child theme files using an FTP client like FileZilla. Copy the header.php file from your Divi theme folder and paste it into your child theme folder. Make sure you keep the file name exactly the same (header.php) and you copy over all of the code that was in the original file.

Once the header.php file is placed in your child theme folder, use a text editor to open/edit the file (make sure you are editing the child theme version).

Locate the div with an id of “et-secondary-menu”. This is the div that contains the secondary menu items.

Add the following code just above the secondary menu div:

<div class="cta"> Want to Learn More ... <a href="#">Click Here</a></div> 

Notice the class “cta” attached to the div. This is what we will use to style the CTA later on.

You will need to replace the hashtag (#) in the href attribute with the url of the page you want the user to visit when they click the CTA link. For example, if you want to drive more users to your contact page, you would put the url to that page.

Also, once you know what your CTA will be, you can change the text “Want to Learn More…” and the link text “Click Here” to whatever you want. Remember to keep it short since there is not a lot of space to work with.

Now let’s view your site to see what the top bar looks like so far.

Right now your top bar contents are out of place and need styling. You can add some custom CSS to fix this.

Final Touches

In WordPress Admin, go to Divi → Theme Options. Scroll down to the custom CSS box and enter the following css:

#top-header .container {
    padding-top: 1.3em;
    font-weight: 600;
    padding-bottom: 0.75em;
}

#et-info {
    width: 33.3%;
    float: right;
    text-align: right;
}

.cta {
width: 33.3%; 
text-align:center;
float: right;
margin-top: -3px;
}

.cta a {
background: #fff;
    color: #eb593c !important;
    padding: 5px 10px;
    display: inline-block;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-weight: 700 !important;
    transition: all 0.5s;
}

.cta a:hover {
background: #555;
color: #fff !important;
}

#et-secondary-menu {
width: 33.3%;
float: left; 
text-align: left;
}

@media (max-width: 980px){
#et-info {
    width: 50%;
    float: right;
    text-align: right;
}

.cta {
width: 50%; 
text-align:center;
float: left;
margin-top: -3px;
}

#et-info {
padding-top:0px;
padding-bottom: 0.75em;
}
}

@media (max-width: 740px){
.cta {display:none;}
#et-info {width: 100%;}
}

This CSS code does four key things to your top bar. 1) It divides your header info, CTA, and secondary menu into a one-third column layout (each with a 33.3% width). 2) It positions the header info to the right column of the top bar, the CTA to the middle, and the secondary menu to the left (this menu is currently inactive but is there if you decide to use it). 3) It styles your CTA. 4) It optimizes the top bar for mobile devices.

That’s it!

Now your top bar is complete with an elegant call to action.

Closing Thoughts

When deciding on the structure of this top bar, I thought it fitting to have the CTA in the center with nothing to the left of it in order to stand out as the first thing the user sees when naturally reading the content from left to right.

Also, you may need to adjust the width of each of the top bar sections in your custom CSS to make more room for your CTA. I tried to keep it small for this example in case you wanted to keep the full functionality of the header info and the secondary menu.

Of course, there are different ways to use this space other than for a CTA. You could use it to display a tagline, a logo/graphic, or a short testimonial.

I hope you enjoy this feature. Feel free to post any input in the comments.

Premade Layouts

Check Out These Related Posts

46 Comments

  1. Excellent. I was waiting for something like this A LONG TIME. :p Thanks.

  2. Downside to this approach is that when DIVI updates their header.php file, your child file will override it, so you won’t get DIVIs updates. Or am I missing something?

    • In the post Jason explains that this is en edit you make to your child theme specifically for this reason. If you create a child theme, include the header.php file in that child theme, and make these edits to that file then you will not lose any changes when you update Divi.

      • Michele is saying that any updates to the parent Divi header.php will be overridden by the child header.php — not that Divi updates will wipe out modifications to header.php.

    • If you read the changelogs when a new update is released, they list all of the changed files at the very bottom. Look to see if the header.php file is included in that list. If it is you update your child-theme file, if not, you forget about it. It’s pretty easy and something that you should always do anyway when updating your themes.

  3. Is there a way to have a populateable email opt-in entry in this secondary menur bar?

    • Great idea, Simon. I thought of that when I was writing the post, but unfortunately there is no easy way to do here.

      • Ah okay. I look forward to when this is possible. Off to find an alternative. Any solutions you might be aware of and would recommend?

        • I tried with Bloom and it works! ; )

          I did the following:

          1. In Call To Action Module Settings
          General Settings
          Button URL: #

          2. In Call To Action Module Settings
          Custom CSS
          CSS Class: cta

          3. In DISPLAY SETTINGS (Bloom Optin Forms)
          CSS Selector (string) put *.cta

          Hope I could help! ; )

    • This is exactly what I’m looking for too. Off to look at WP plugins.

  4. Was a piece of cake to implement, thank you!

    • You’re welcome!

  5. Is this CTA solution possible if the share icons are activated?

    • Yes. All of the header elements will work with this setup. The share icons work well for larger screens but may render underneath the email and phone elements on smaller screens.

  6. What if we only want the CTA? Will this still work if we don’t include an email and phone #?

    • I’m pretty sure you need to enter at least one header element in order to deploy the secondary menu. The quickest way I can think of doing what you want with the current setup is to hide the header elements using css:

      #et-info {visibility:hidden;}

      Hope that helps.

      • Perfect! That worked for me too. Excellent tutorial Jason.

  7. Any chance you could show us how to embed the Google Translate flags in the Left 1/3rd?

  8. Could I create an inline Bloom shortcode to place in top menu bar?

  9. You should be able to do this fairly easily. Search for the html code for the google translate widget you want and then drop it inside the CTA div you created in the header.php file.

    Basically you replace this…

    <div class="cta"> Want to Learn More ... <a href="#">Click Here</a></div>

    with this…

    <div class="cta"> [enter google translate widget code here] </div>

    That should work.

  10. Is there a way to split test the cta using divi split testing features? My client wants visitors to call them or email them. I would like to split test a few contact forms.

  11. How can I leave the TOP BAR fixed?

    • You can enable the Fixed Navigation Bar in Divi –> Theme Options –> General tab. That will make both the top bar and the menu bar fixed.

      To leave only the top bar fixed, enable the Fixed Navigation Bar and add the following css:

      #top-header {
          position: fixed;
          left: 0;
          top: 0;
          right: 0;
      }
      #main-header {
      top: 22px !important;
      }
      

      That should do the trick.

      Hope that helps.

  12. Looking for that! Thank you!

  13. Any easy way to align it to the left of the bar and to not use full-width menu bar?

    • It doesn’t need to be full width to use it. You just won’t have as much room to play with. Right now the three sections of the top bar are divided into thirds (33.3% width sections) so it will remain that percentage of whatever width you make your page.

      As far as aligning the CTA to the left. This is really simple. Just change the css that controls the CTA section to float it left instead of right.

      .cta {
          width: 33.3%;
          text-align: center;
          float: left;
          margin-top: -3px;
      }
      

      Hope that helps.

    • use visual composer plugin or check wordpress available plugin

  14. I appreciate the detailed step-by-step process to manipulate some of the coding, but to me, this kind if looks bad on the part of Divi.

    The framework is touted as a revolutionary theme that allows effortless customization. The caveat though is that the effortless customization is limited to the body of each page. Customizing elements in the first or secondary header bars requiring coding and adjustments to php files.

    I would love to see customization applied to all portions of Divi, not just the body of each page.

  15. Hello

    I wanted to do this, but in the style.css I have 9 matches of “et-secondary-menu”

    http://i.imgur.com/Wv4BEoc.png

    Wich is the good one ?

    I have applied this code in the 9 matches one per one, and I have anything
    ” Want to Learn More … Click Here

    Best regards.

    • Hey Bryan,

      I’m not sure what you are asking. Can you be more clear? What code are you applying? What are you trying to do exactly?

      I would love to help out if I can.

      Thanks.

  16. Any way to add mega-menu function to the secondary menu? I have a webpage where I switched the primary and secondary menu positions. But the divi mega-menu function dont work on secondary menu.

    • That is something I’ll have to look into. I’m not sure at the moment but I will keep that in mind. I would assume that you would have to mimic the css to deploy the mega menu on the normal menu and add it to the secondary menu. But again, not sure.

  17. How can I add my logo to this menu in the CSS?

  18. Hi! Simple yet great idea!

    One question: How do we apply this only to first hierarchy, this is, not in sub menus?

    Thanks! Mauricio

  19. Hello Jason,
    great article!
    I have a quick question I wish you could help me with…
    I have added a CTA in the Divi Menu adding this to the CSS:

    /*Menu CTA Button*/
    #et-top-navigation .et_pb_button {

    border-radius: 3px;
    background: #8DBF42;
    color: #000000;?
    margin-top: 0px;
    font-size: inherit;
    font-weight: inherit;

    But I would like for the CTA not to appear un mobile. Is this possible?

    Thank you so much in advance!
    Carlos

  20. Hi – Thanks for the info so far. Could you explain how I get the cta button to display on mobile as well. I would also like to remove the other info (tel and email). Basically I just want the cta button to display top right on all devices. Thanks.

    • Hi Zoe,

      Try replacing this code:

      @media (max-width: 740px){
      
      .cta {display:none;}
      #et-info {
      width: 100%;
      }
      
      }
      

      with this code:

      @media (max-width: 740px){
      
      .cta {width: 100%; text-align:right;}
      #et-info {
      display:none;
      }
      
      }

      Does that work for you?

  21. Nice, Thanks

  22. Hi,Thanks for the info.

  23. Muchas Gracias Jason!!!

  24. Hello,

    it works pretty well on desktop. But I have problem to display this on tablet on mobile. There is no button. But is there a way to move this funcionality to menu on mobile device .. simply on desktop will be shown as u made this and on mobile device move to the bottom of menu?

    Thx in advance

  25. Hello, I have tried to implement this. I have been using a child theme since the start. I took the header.pho from the parent them but my header.php doesn’t look like yours. There is no div or other CSS. Why is that? How do I fix it so I can implement the Call To Action? Thank you!

  26. Hi there, thanks for the awesome post! Quick question. Is this call to action bar responsive? I’m not sure if it’s the changes I made, but it doesn’t seem to be responsive. If it is not would you mind helping to make it responsive, please?

    Also, it would be amazing if, we could also add a close button to the top right-hand corner to close the bar – just like Elegant Theme’s own call to action bar.

    Thanks!

  27. I’m not using DIVI theme, only the plugin.
    How do I apply this?

  28. Hi Jason,

    Everything went well for me until I got to the css part. It didn’t work at all. I had hoped to see it work first, then I had wanted to see how to leave the contact info on the left and move the cta to the right. Any suggestions?

    Thanks!

  29. This is EXACTLY what I wanted my header to look like! I’m going to give it a try today and hope it works! It was also very easy to understand. Thank you for the great information. Alanna

Join To Download Today

Pin It on Pinterest