Title: custom button in header
Last modified: December 14, 2017

---

# custom button in header

 *  Resolved [mbinghamhawk](https://wordpress.org/support/users/mbinghamhawk/)
 * (@mbinghamhawk)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/custom-button-in-header/)
 * I recently switched to Responsive Menus. Prior to switching, I had a button on
   the right side of the header (see [http://www.saltlakecitymarathon.com](http://www.saltlakecitymarathon.com)
   to see an example of the button on our current site).
 * This is the code I added to the header section for the button.
 *     ```
       <script>
       jQuery( document ).ready(function() {
       jQuery('#et-top-navigation').append('<div class="et_pb_button et_pb_module et_pb_bg_layout_dark" id="regbutton"><a href="https://register.chronotrack.com/r/24153" target="_blank">REGISTER</a></div>');
       });
       </script>
       ```
   
 * This is the styling I added to the custom CSS for my WP theme.
 *     ```
       /* Properties for Button in Main Nav */
       #regbutton, #regbutton {
       background-color: #a1cd6d;
       border: 1px solid #a1cd6d;
       float: right;
       padding-bottom: 0;
       padding-top: 0;
       }
   
       /* Keeps Button in Main Nav to Right */
       #regbutton.et_pb_button {
       position: absolute;
       }
   
       /* Button Text Color in Main Nav */
       #regbutton a {color: #fff;
       }
       ```
   
 * _[Moderator note: code fixed. Please wrap code in the backtick character or [use the code button](https://make.wordpress.org/support/handbook/forum-welcome/#post-code-safely).]_
 * Can you help me modify the code to add this button to the Responsive Menu header?
    -  This topic was modified 8 years, 5 months ago by [bdbrown](https://wordpress.org/support/users/bdbrown/).
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcustom-button-in-header%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [Peter Featherstone](https://wordpress.org/support/users/peterfeatherstone-1/)
 * (@peterfeatherstone-1)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/custom-button-in-header/#post-9781878)
 * Hey there,
 * I wouldn’t be using jQuery for injecting an element into the page, is there a
   reason or necessity for doing it this way?
 * I think all you need to do is add the HTML to the Header Bar Additional HTML 
   section and ditch the jQuery.
 * Once that is done, you can then likely adjust your CSS accordingly. Unfortunately,
   I didn’t build your site so your web developer would probably be the best person
   to speak to about what to do.
 * Please let me know how you get on.
 * Peter
 *  Thread Starter [mbinghamhawk](https://wordpress.org/support/users/mbinghamhawk/)
 * (@mbinghamhawk)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/custom-button-in-header/#post-9783768)
 * I am the web designer. The Divi team suggested the jquery and it has worked great.
   Do you have any recommendation on how to add a button into your header. Even 
   a simple button would help me get on my way.
 *  Thread Starter [mbinghamhawk](https://wordpress.org/support/users/mbinghamhawk/)
 * (@mbinghamhawk)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/custom-button-in-header/#post-9783778)
 * HEre is a screenshot of what my site looked like with that code. This was how
   it looked prior to installing Responsive Menus.
 * [https://www.dropbox.com/s/9e20r73orj62wid/Screen%20Shot%202017-12-14%20at%201.28.36%20PM.png?dl=0](https://www.dropbox.com/s/9e20r73orj62wid/Screen%20Shot%202017-12-14%20at%201.28.36%20PM.png?dl=0)
 *  Thread Starter [mbinghamhawk](https://wordpress.org/support/users/mbinghamhawk/)
 * (@mbinghamhawk)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/custom-button-in-header/#post-9784304)
 * So I sort of figured out part of it.
 * I added the following code to my theme’s integration panel which inserts the 
   code in the header of the page:
 * <script>
    jQuery( document ).ready(function() { jQuery(‘#responsive-menu-pro-
   header’).append(‘<div class=”et_pb_button et_pb_module et_pb_bg_layout_dark” 
   id=”regbutton”>[REGISTER](https://register.chronotrack.com/r/24153)</div>’); });
   </script>
 * This allowed me to insert the button directly into the “responsive-menu-pro-header”.
 * I could then effect the padding and positioning. There is a slight problem in
   that the button is not clickable.
 *  [Peter Featherstone](https://wordpress.org/support/users/peterfeatherstone-1/)
 * (@peterfeatherstone-1)
 * [8 years, 5 months ago](https://wordpress.org/support/topic/custom-button-in-header/#post-9785287)
 * Hey there,
 * I just checked your site and I can click the button fine.
 * Please advise
 * Peter

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘custom button in header’ is closed to new replies.

 * ![](https://ps.w.org/responsive-menu/assets/icon-256x256.png?rev=1782326)
 * [Responsive Menu - Create Mobile-Friendly Menu](https://wordpress.org/plugins/responsive-menu/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/responsive-menu/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/responsive-menu/)
 * [Active Topics](https://wordpress.org/support/plugin/responsive-menu/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/responsive-menu/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/responsive-menu/reviews/)

 * 5 replies
 * 2 participants
 * Last reply from: [Peter Featherstone](https://wordpress.org/support/users/peterfeatherstone-1/)
 * Last activity: [8 years, 5 months ago](https://wordpress.org/support/topic/custom-button-in-header/#post-9785287)
 * Status: resolved