Need CSS Help

Support
#1

Hello,

  1. My header, the menu items are supposed to be white bg and black text, then upon hover they’re supposed to be white bg and black text, but they’re showing up as all black and white (except for the 1st menu items, those are displaying correctly). How can I fix this?

  2. The Section “OUR CLIENTS LOVE US”, how can I connect the section row with the first row, where only 1 block of text is displaying at once?

Thank you!

#2

Hello Mary,

Thanks for asking. :slight_smile:

  • Are you referring to the sub menu background color as over there I do see some issues? Here’s the screencast.

When I inspected the website in dev tools, I see that you have added bunch of custom CSS codes that’s changing styling of the dropdown menu. Here’s a screenshot. So, my first suggestion would be to remove all the custom CSS that you have added.

I checked the website and the first dropdown is having Black background and white text on hover state. And I think that’s what you are looking for. To change the styling, please take following steps:

  1. Open the Header Builder and inspect the Navigation inline element by clicking on the search icon.

  2. Click on the Sublinks menu item.

  3. You can change the background color on hover of menu items under Setup > Background > Interaction and select the color from color picker window.

  4. To change the text color on hover. Under Sub Links > Primary Text Style > Text Color > Interaction select the color from color picker window.

• Link Our Client Love Us: I am not quite hundred percent sure about the question and where you want to link the section too. But as you are looking to link the section and upon clicking the same it should link to a different section, here’s how you can do the same. Let’s say you want to link a text to a different section.

  1. First insect the target section and under Customize > Setup > ID give a name.
  2. Next, inspect the text element and create a text link. In the URL, add url in following in following manner. http://xtheme.com/#sectionidname. Over here, sectionidname is the name of section id that you assigned in previous step. Please make sure to replace the URL and ID name as per your requirement.

Let us know how it goes.

Thanks

#3

Under “OUR CLIENTS LOVE US” I want both rows to be connected, where only 1 image is hoverable at a time, rather than both rows being separable. Does that make sense?

Also, I removed the CSS from the header and edited the styles, but it’s still only doing what I want under the 1st menus items, everything else is still incorrect. Please assist.

#4

Hi Mary,

That sub-menu issue is weird. Please comment out all your custom CSS including each of the Elements CSS on your header and footer (yes including the footer elements). More likely there is a broken CSS rule somewhere on your elements that is causing this issue. Please remember which element you’ve added a CSS on its Element CSS area.

Use the CSS block commenting (not the single line commenting //) so you don’t need to remove all your element CSS to find one that is causing the issue. That means wrap your CSS rule inside /* */

Comments in CSS

Regretfully, the tab element is not designed for that type of feature. Please use a plugin for your testimonials instead.

https://wordpress.org/plugins/search/testimonials/

Thanks,

#5

The CSS the is there was given to me by one of your team members to previously solve this issue, but it isn’t working. I understand how the commenting works. I need assistance, as it’s not working as it should. it’s working on alternate pages, but not the home page.

#6

Hello Mary,

1.) The issue happen because this custom css code were added in your navigation inline element:

 body .sub-menu .x-anchor:hover {
     background-color:#000 !important;
     color:#fff !important;
}

and this css:

body .sub-menu .x-anchor:hover {
     background-color:#000 !important;
     }

 body .sub-menu .x-anchor:hover .x-anchor-text-primary { 
    color:#fff !important;
 }

I have commented this out and the menu is now displaying correctly. The menu is displaying white background with black text.

2.) The tabs in each rows were independent from each other. You cannot link them together. Regretfully what you have in mind connecting two tab list is not possible. You should only use one tab element so that only one image can be hovered at a time.

Best Regards.

#7

That solved the menu issues, thank you!

#8

We are delighted to assist you with this.

Cheers!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.