custom button in header

  • Resolved mbinghamhawk

    (@mbinghamhawk)


    7 years, 2 months ago

    I recently switched to Responsive Menus. Prior to switching, I had a button on the right side of the header (see https://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.]

    Can you help me modify the code to add this button to the Responsive Menu header?

    • This topic was modified 7 years, 2 months ago by bdbrown.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Peter Featherstone

    (@peterfeatherstone-1)

    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

    (@mbinghamhawk)

    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

    (@mbinghamhawk)

    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

    Thread Starter mbinghamhawk

    (@mbinghamhawk)

    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</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

    (@peterfeatherstone-1)

    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.