Menu item, scroll top anchor, accordion styling fixes for Pro theme

Support
#1

I have just switched my website to the Pro theme. How do I achieve the following fixes?

  • I would like each menu item to stay green for the page that is displayed. At the moment, the green color is activated only on hover.

  • The scroll top anchor is activated in Customize–>Miscellaneous, but the up arrow disappears under the footer menu rather than showing over the top of it.

  • On the Boarding page, the subheadings Boarding, Daycare, How Am I Charged etc. have anchors at the relevant titles. However, when they are clicked and the page moves to each section, the title mostly disappears under the header. Is there any way to stop this from happening?

  • I would like to remove the indent on the accordion titles that is displayed on mobile devices (FAQ page).

My URL is http://woodlandsdogsuites.com

Thank you!

#2

Hey there,

1 - For the menu, there’s currently no option for it. Please add this CSS in Pro > Launch > Theme Options > CSS

.current-menu-item .x-anchor-text-primary {
    color: rgb(100,165,77);
}

2 - The Scroll to Top’s z-index is 1031. Please set your footer bar’s z-index lower than that.

3 - Regretfully, there’s no feature to offset the height of the sticky bar. So for now, you need to increase the top padding of your sections. Try 60px

4 - This one involves some media queries. Though I’ll give you the code to eliminate the icon which is causing the space only in tablet and smaller screens, please bear in mind that this could break the styling of your site in case you missed copying the closing bracket or part of the CSS. This doesn’t also guarantee that it will work in your site. I just tested it in the developer tools. Either way, issues arising from the use of this code and further enhancements would be outside the scope of our support. Here’s the code:

@media (max-width: 767px) {
    .x-accordion-heading .x-accordion-toggle:before {
        display: none;
    }
}

Thanks.

#3

Thank you.

I have fixed items 2 and 3 with your instructions.

For item 1 - Could you please check if I have inserted the CSS correctly? I can’t get it to work.

For item 4 - I could not get it to work with the code provided. Is it possible to make the icon visible at the front of the text? A “+” icon or similar. I didn’t actually realize there was supposed to be an icon there until your comments. I cannot see one even on larger screen sizes.

#4

Hi there,

  • As you already use the Header Builder I guess you used the Navigation Inline element to add the menu items. You can simply go to Navigation Inline Options > Top Links > Text:

There you will see an option to change the color of the text in normal and interactive mode:

I highly recommend that you check this tutorial to get familiar with different options:

https://theme.co/apex/forum/t/pro-tips-and-tricks/214

Also, check the Pro section of this article which has information for each element you use:

https://theme.co/apex/forum/t/pro-tips-and-tricks/214

  • Please kindly add the code below to Pro > Launch > Theme Options > CSS to change the color of the arrows in accordion:
.x-accordion-heading .x-accordion-toggle.collapsed:before,
.x-accordion-heading .x-accordion-toggle:before,
.x-accordion-heading:hover .x-accordion-toggle:before {
    color: #037681;
}

But I did not understand exactly what you want to achieve in mobile view. Would you please kindly give us more detailed information and screenshots?

Thank you.

#5

Hello There,

1.) You have added the correct CSS. Though the root cause of this issue is because the active state is not added on current menu. This is a known bug and it is under investigation. That CSS will work, though there’s more specific CSS that overriding it. Try to remove that CSS and then add this custom JS instead on GLOBAL JS:

jQuery( '.current-menu-item a' ).each( function() {
jQuery(this).addClass('x-interactive');
jQuery(this).parent().find('a > span > span').addClass('x-active');
} ); }, 300);```

Once we add that JS, it will automatically get the interactions settings you have set on Header Builder. Just to avoid confusion, the previous CSS suggestion will work too, but in case you have change that settings on the header builder, we have to update that CSS again. On the other hand, adding the JS only means that we will just set the correct state of the menu and it will get header builder settings. No extra code needed.

4.) There's an icon there. We can't see it at the moment because of it's current color. To make it visible, we have to change it's color. See this [screencast](https://screencast-o-matic.com/watch/cbj0inl8CW) on how to inspect element and check which selector we have to use.

```#faq .x-accordion-heading .x-accordion-toggle.collapsed:before {
    color: red;
    content: "\f067";
}```
We can get Icon unicode here: http://fontawesome.io/icon/plus/
This might help you for CSS specificity: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

Add the CSS on your child theme style.css file because the backslash might be strip off in the customizer.

Hope this helps.
#6

Thank you. This was very helpful!
I have managed to get the styling to work the way I wanted.

#7

You’re welcome! Glad it’s okay now :slight_smile:

#8

This is a solution that impacts the design of your page. A work-around is to also give you sections a negative margin.

.x-section { margin-top: -60px; padding-top: 60px }

I hope this helps anyone googling this.

#9

Thanks for the information!
Definitely, it’s helpful!