DIVI Coding

This one is a bit of work but VERY worth the effort.

The following 4 steps will allow for setting up links (button or other) from any page in the site to link directly to a specific tab on another page AND open it.
(We needed to use this in conjunction with shortcodes added to tabs on a Contact page so that visitors could be sent directly to the correct form.)

1) Assign CSS ID to the tab module being used – contact-tabs

2) We created 6 tabs with the following titles. You can change the titles or number of tabs as needed but be sure to change the script to the appropriate names and to add/remove each script section needed. (Donations, Marketing, Research, Scholarships, Fundraising, General Questions)

3) Add the following code to Divi > Theme Options > Integration > Add code to the < head > of your blog

<script>
jQuery(function ($) {
//Anchor links for the Tabs module – Contact page
//Donations

$(‘a.open-donations’).on(‘click’, function(event){
$(‘#contact-tabs .et_pb_tab_0 a’).click();
});
});
</script>

<script>
jQuery(function ($) {,
//Marketing
$(‘a.open-marketing’).on(‘click’, function(event){
$(‘#contact-tabs .et_pb_tab_1 a’).click();
});
});
</script>
<script>
jQuery(function ($) {
//Research
$(‘a.open-research’).on(‘click’, function(event){
$(‘#contact-tabs .et_pb_tab_2 a’).click();
});
});
</script>

<script>
jQuery(function ($) {
//Scholarships
$(‘a.open-scholarships’).on(‘click’, function(event){
$(‘#contact-tabs .et_pb_tab_3 a’).click();
});
});
</script>

<script>
jQuery(function ($) {
//Fundraising
$(‘a.open-fundraising’).on(‘click’, function(event){
$(‘#contact-tabs .et_pb_tab_4 a’).click();
});
});
</script>

<script>
jQuery(function ($) {
//General Questions
$(‘a.open-general-questions’).on(‘click’, function(event){
$(‘#contact-tabs .et_pb_tab_5 a’).click();
});
});
</script>

4) Create your links to the tabs using the following (adjusting the areas in red accordingly and the correct tab number at the end)

Link to add: <https://yoursite.com/page/#contact-tabs|5>

That’s it. Save your work and all should work well.

• Better Mobile Menu
• Closed Mobile Menu setup
• Fix Responsive Nature of your Menu
• Change Menu Breaking Point for Mobile
• Overlapping Logo
• Hide the Phone Icon and/or Phone Number
• Customizing Divi’s Secondary Menu Bar with a Call to Action
• Make Your Divi Navigation Start at the Bottom, Then Stay Fixed at Top When Scrolling
• Fun Header Modifications
• Secondary Menu CTA
• Change Logo on Scroll

First you need to create a dropdown menu. Then you can add this CSS for the styling. place the CSS code in Theme options > Custom CSS or in your child theme if you are using one. (just cut, paste and save)

————————————–
/* — Dropdown Menu Settigs — */

#top-menu .sub-menu {
background-color: #3c5464; /* Background color dropdown */
border-top: 3px solid #25313a; /* Top border color dropdown */
}

#top-menu .sub-menu li a {
font-size: 14px; /* Font size dropdown */
width: 100%;
color: #fff;
border-bottom: 1px solid #768792; /* Border bottom menu item color */
}

.sub-menu li:hover {
background-color: #25313a; /* Hover color menu item */
}

.sub-menu .current_page_item {
background-color: #25313a; /* Current menu item color dropdown */
}

#top-menu .sub-menu li {
padding-left: 0px;
padding-right: 0px;
width: 100%;
}

#top-menu li li a {
padding-top: 10px;
padding-bottom: 8px;
}

#top-menu .sub-menu {
padding-top: 0px;
padding-bottom: 0px;
}

.nav ul li a:hover {
opacity: 1;
background-color: rgba(0,0,0,0);
}

/* — END – Dropdown Menu Settigs — */

• Multiple Effects
• Clickable Blurb Module
• Blurb as Toggle
• Image Hover Layout

• Shopping Cart/CSS