Interfering CSS

David Henson

David Henson

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]
 
C

Chaos

Joined
Jan 24, 2024
Messages
41
Reaction score
8
David Henson said:
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]
Click to expand...
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

Similar Threads

Dropdown menu in a fixed navbar 2
Help with my responsive home page 2
Not sure why drop-down is not working. 2
Help with Visual Lightbox: Scripts 2
Working on mobile css menu with plenty of frustration! 2
How can I get my menu inside of a menu to function properly? 1
I need help fixing my website 2
Buttons lining up 1

Members online

No members online now.
Total: 161 (members: 0, guests: 161)
Robots: 505

Forum statistics

Threads
473,913
Messages
2,570,027
Members
46,421
Latest member
WaylonBran

Latest Threads

Top