Interfering CSS

Joined
Feb 6, 2024
Messages
4
Reaction score
1
Hello everyone, I'm having trouble with the CSS of one part of my website interfering with another part. The hover color and spacing of an accordion and a megamenu. So, I was hoping someone could tell me how to make

Code:
/*----------------------------*\
    MENU
\*----------------------------*/

.nav-menu {
  position: relative;
  text-align: center;
  float: none;
}

.nav-menu>li {
  float: none;
  display: inline-block;
}

.nav-menu>li>a {
  display: block;
  padding: 25px 15px;
  line-height: 20px;
  font-weight: normal;
  text-transform: none;
}

/*----------------------------*\
    DROPDOWN
\*----------------------------*/

.nav-menu li.has-dropdown {
  background: #000000;
  position: relative;
}

.nav-menu li.has-dropdown>a:after {
  font-family: 'FontAwesome';
  content: "\f0d7";
  margin-left: 5px;
}

.nav-menu li.has-dropdown>.dropdown {
  position: absolute;
  left: 0;
  width: 200px;
  text-align: left;
  z-index: 60;
  -webkit-transform: translateY(10px);
  -ms-transform: translateY(10px);
  transform: translateY(10px);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
}

.nav-menu li.has-dropdown:hover>.dropdown {
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  opacity: 1;
  visibility: visible;
}

.nav-menu li.has-dropdown>.dropdown .dropdown-body {
  background-color: #000000;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  border-top: 1px solid #7aa3c3;
}

.dropdown .dropdown-list li {
  border-bottom: 1px solid #7aa3c3;
}

.dropdown .dropdown-list li a {
  display: block;
  padding: 10px;
  line-height: 20px;
}

.dropdown .dropdown-heading {
  text-transform: none;
  font-size: 20px;
  margin-top: 0px;
  margin-bottom: 10px;
  line-height: 30px;
}

/*----------------------------*\
    MEGA DROPDOWN
\*----------------------------*/

.nav-menu li.has-dropdown.megamenu {
  background: #000000;
  position: static;
}

.nav-menu li.has-dropdown.megamenu>.dropdown {
  width: 100%;
}

.nav-menu li.has-dropdown.megamenu>.dropdown .dropdown-body {
  padding: 30px;
}

.nav-menu li.has-dropdown.megamenu>.dropdown .dropdown-list {
  margin-bottom: 30px;
}

.nav-menu li.has-dropdown.megamenu>.dropdown .dropdown-list li a {
  padding-left: 0px;
  padding-right: 0px;
}

/*----------------------------*\
    TAB DROPDOWN
\*----------------------------*/

.nav-menu li.has-dropdown.megamenu>.dropdown.tab-dropdown .tab-content {
  background: #000000;
  z-index: 60;
  position: relative;
  margin-left: -31px;
}

.nav-menu li.has-dropdown.megamenu>.dropdown.tab-dropdown .tab-nav {
 background: #000000;
  -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 60;
}

.nav-menu li.has-dropdown.megamenu>.dropdown.tab-dropdown .tab-nav li {
  background: #000000;
  border-bottom: 1px solid #7aa3c3;
  border-top: 1px solid #7aa3c3;
}

.nav-menu li.has-dropdown.megamenu>.dropdown.tab-dropdown .tab-nav li a {
  background: #202020;
  display: block;
  padding: 31px;
  color: #d9c09f;
  font-weight: normal;
  font-size: 12px;
  text-transform: none;
}

.nav-menu li.has-dropdown.megamenu>.dropdown.tab-dropdown .tab-nav li.active {
  background: #202020;
}


not interfere with

Code:
/*=========================================================
    ACCORDION
===========================================================*/
.accordion {
  background-color: #d2b48c;
  color: #000000;
  font-weight: bold;
  font-family: Genos;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 22px;
  transition: 0.4s;
  -webkit-box-shadow: 0px 0px 0px 3px #66605b inset;
  box-shadow: 0px 0px 0px 3px #66605b inset;
}

.active, .accordion:hover {
  background-color: #000000;
  color: #d2b48c;
}

.accordion:after {
  content: '\002B';
  color: #ffffff;
  font-weight: bold;
  float: right;
  margin-left: 5px;

}

.panel {
  padding: 0 18px;
  background-color: #000000;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  -webkit-box-shadow: 0px 0px 0px 2px #000000 inset;
  box-shadow: 0px 0px 0px 2px #000000 inset;
}

Any help that you could give would be greatly appreciated.

Thanks.

.nav-menu li.has-dropdown.megamenu>.dropdown.tab-dropdown .tab-nav li.active a {
background: #000000;
color: #d9c09f;
}
[/CODE]
 
Joined
Jan 24, 2024
Messages
42
Reaction score
7
Hello everyone, I'm having trouble with the CSS of one part of my website interfering with another part. The hover color and spacing of an accordion and a megamenu. So, I was hoping someone could tell me how to make

Code:
/*----------------------------*\
    MENU
\*----------------------------*/

.nav-menu {
  position: relative;
  text-align: center;
  float: none;
}

.nav-menu>li {
  float: none;
  display: inline-block;
}

.nav-menu>li>a {
  display: block;
  padding: 25px 15px;
  line-height: 20px;
  font-weight: normal;
  text-transform: none;
}

/*----------------------------*\
    DROPDOWN
\*----------------------------*/

.nav-menu li.has-dropdown {
  background: #000000;
  position: relative;
}

.nav-menu li.has-dropdown>a:after {
  font-family: 'FontAwesome';
  content: "\f0d7";
  margin-left: 5px;
}

.nav-menu li.has-dropdown>.dropdown {
  position: absolute;
  left: 0;
  width: 200px;
  text-align: left;
  z-index: 60;
  -webkit-transform: translateY(10px);
  -ms-transform: translateY(10px);
  transform: translateY(10px);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
}

.nav-menu li.has-dropdown:hover>.dropdown {
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  opacity: 1;
  visibility: visible;
}

.nav-menu li.has-dropdown>.dropdown .dropdown-body {
  background-color: #000000;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  border-top: 1px solid #7aa3c3;
}

.dropdown .dropdown-list li {
  border-bottom: 1px solid #7aa3c3;
}

.dropdown .dropdown-list li a {
  display: block;
  padding: 10px;
  line-height: 20px;
}

.dropdown .dropdown-heading {
  text-transform: none;
  font-size: 20px;
  margin-top: 0px;
  margin-bottom: 10px;
  line-height: 30px;
}

/*----------------------------*\
    MEGA DROPDOWN
\*----------------------------*/

.nav-menu li.has-dropdown.megamenu {
  background: #000000;
  position: static;
}

.nav-menu li.has-dropdown.megamenu>.dropdown {
  width: 100%;
}

.nav-menu li.has-dropdown.megamenu>.dropdown .dropdown-body {
  padding: 30px;
}

.nav-menu li.has-dropdown.megamenu>.dropdown .dropdown-list {
  margin-bottom: 30px;
}

.nav-menu li.has-dropdown.megamenu>.dropdown .dropdown-list li a {
  padding-left: 0px;
  padding-right: 0px;
}

/*----------------------------*\
    TAB DROPDOWN
\*----------------------------*/

.nav-menu li.has-dropdown.megamenu>.dropdown.tab-dropdown .tab-content {
  background: #000000;
  z-index: 60;
  position: relative;
  margin-left: -31px;
}

.nav-menu li.has-dropdown.megamenu>.dropdown.tab-dropdown .tab-nav {
 background: #000000;
  -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 60;
}

.nav-menu li.has-dropdown.megamenu>.dropdown.tab-dropdown .tab-nav li {
  background: #000000;
  border-bottom: 1px solid #7aa3c3;
  border-top: 1px solid #7aa3c3;
}

.nav-menu li.has-dropdown.megamenu>.dropdown.tab-dropdown .tab-nav li a {
  background: #202020;
  display: block;
  padding: 31px;
  color: #d9c09f;
  font-weight: normal;
  font-size: 12px;
  text-transform: none;
}

.nav-menu li.has-dropdown.megamenu>.dropdown.tab-dropdown .tab-nav li.active {
  background: #202020;
}


not interfere with

Code:
/*=========================================================
    ACCORDION
===========================================================*/
.accordion {
  background-color: #d2b48c;
  color: #000000;
  font-weight: bold;
  font-family: Genos;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 22px;
  transition: 0.4s;
  -webkit-box-shadow: 0px 0px 0px 3px #66605b inset;
  box-shadow: 0px 0px 0px 3px #66605b inset;
}

.active, .accordion:hover {
  background-color: #000000;
  color: #d2b48c;
}

.accordion:after {
  content: '\002B';
  color: #ffffff;
  font-weight: bold;
  float: right;
  margin-left: 5px;

}

.panel {
  padding: 0 18px;
  background-color: #000000;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  -webkit-box-shadow: 0px 0px 0px 2px #000000 inset;
  box-shadow: 0px 0px 0px 2px #000000 inset;
}

Any help that you could give would be greatly appreciated.

Thanks.

.nav-menu li.has-dropdown.megamenu>.dropdown.tab-dropdown .tab-nav li.active a {
background: #000000;
color: #d9c09f;
}
[/CODE]
CSS:
/*----------------------------*\
    MENU
\*----------------------------*/


/* ... Your existing menu styles ... */


/*----------------------------*\
    MEGA DROPDOWN
\*----------------------------*/


/* ... Your existing megamenu styles ... */


/*----------------------------*\
    TAB DROPDOWN
\*----------------------------*/


/* ... Your existing tab-dropdown styles ... */


/*----------------------------*\
    ACCORDION
\*----------------------------*/


/* ... Your existing accordion styles ... */


/* Specific styles for the accordion when it's active or hovered */
.accordion.active, .accordion:hover {
  background-color: #000000;
  color: #d2b48c;
}


/* Specific styles for the accordion panel */
.panel {
  background-color: #000000;
}


/* Adjust styles for the icon in the accordion */
.accordion:after {
  color: #ffffff;
}

By organizing your styles in a more modular way and using specific selectors, you can minimize interference between different sections of your website. Make sure to include this CSS code after your existing styles to ensure that it takes precedence. Additionally, you can adjust the styles as needed for your design.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,794
Messages
2,569,641
Members
45,355
Latest member
SJLChristi

Latest Threads

Top