maxvkva

Anyone?

@anevins I tried that, unfortunately I ran out of my support time for the theme and they will only offer support when I buy 6 new months ($42!!) of support.. I’m not really willing to pay that money to fix a bug.

I tried to deactivate all the plugins. That did not resolve the issue.

After activating the twenty seventeen theme the option ‘theme options’ completely disappeared, apparently that option is linked to the Avada theme. I already updated everything (wordpress, avada theme, plugins etc) but still no luck.

So im still looking for a solution

• This reply was modified 7 years ago by maxvkva.

Code could also be seen here:

https://gist.github.com/anonymous/925ee8c763584114a8497e90c34b84cf

This is the entire CSS code of the navigation:

/*--------------------------------------------------------------
Menu
--------------------------------------------------------------*/
.main-navigation {
	clear: both;
	display: block;
	font-size: 0.73em;
	line-height: 1.3;
	font-weight: 900;
	text-transform: uppercase;
	background-image: url("https://www.mix-max.org/wp-content/uploads/2016/06/background-bwnav.png");
	padding-top: 5px;
	width: 100%;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	text-align: center;

}
.main-navigation ul li {
	display: inline-block;
	position: relative;
	margin-left: 8px;
	margin-right: 8px;

}
.main-navigation ul li a {
	display: block;
	padding-bottom: 7px;
	color: #24282d;
	text-decoration: none;
	-webkit-transition: all 250ms ease;
	-moz-transition: all 250ms ease;
	-o-transition: all 250ms ease;
	transition: all 250ms ease;
	color: white;
}
.main-navigation ul li a:hover, .main-navigation ul li a:focus, .main-navigation ul li a:active {
		color: red;
}
.main-navigation ul li:first-child {
	margin-left: 0px;
}
.main-navigation ul li:last-child {
	margin-right: 0px;
}
@media screen and (min-width: 960px) {
	.main-navigation ul li:hover > ul {
		display: block;
		opacity: 1;
		-webkit-animation: fade-in 250ms;
		-moz-animation: fade-in 250ms;
		-ms-animation: fade-in 250ms;
		-o-animation: fade-in 250ms;
		animation: fade-in 250ms;
	}
}
.main-navigation ul .current_page_item > a,
.main-navigation ul .current-menu-item > a {
	color: #e06d5e;
}
.main-navigation ul .genericon {
	position: absolute;
	top: -1px;
	right: 0;
	z-index: 9999;
	width: 40px;
	height: 40px;
	background: white;
	border: 1px solid #f1f2f3;
	color: #24282d;
	font-size: 24px;
	line-height: 40px;
	text-align: center;
}
.main-navigation ul .genericon.genericon-collapse {
	background: #e06d5e;
	color: white;
}
.main-navigation ul ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 9998;
	float: left;
	padding: 10px 0;
	margin-left: -100px;
	background: white;
	border: 1px solid #f1f2f3;
	text-align: left;
}
@media screen and (min-width: 960px) {
	.main-navigation ul ul {
		opacity: 0;
	}
	.main-navigation ul ul:before, .main-navigation ul ul:after {
		content: '';
		display: block;
		position: absolute;
		left: 50%;
	}
	.main-navigation ul ul:before {
		top: -5px;
		z-index: 2;
		border-right: 5px solid transparent;
		border-bottom: 5px solid white;
	}
	.main-navigation ul ul:after {
		margin-left: -1px;
		top: -7px;
		z-index: 1;
		border-right: 7px solid transparent;
		border-bottom: 7px solid #f1f2f3;
	}
}
.main-navigation ul ul li {
	padding: 10px 0;
	margin: 0;
	border-bottom: 1px solid #f1f2f3;
}
.main-navigation ul ul li:first-child {
	padding-top: 0;
}
.main-navigation ul ul li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}
.main-navigation ul ul a {
	padding: 0 10px;
	width: 200px;
	color: black;
}
.main-navigation ul ul ul {
	top: -1px;
	left: 100%;
	margin-left: -10px;
}
@media screen and (min-width: 960px) {
	.main-navigation ul ul ul:before, .main-navigation ul ul ul:after {
		display: none;
	}
}
.main-navigation .menu-toggle {
	display: none;
	cursor: pointer;
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	margin: 0 0 0 -20px;
	width: 40px;
	height: 40px;
	background: white;
	color: #24282d;
	border: 1px solid #f1f2f3;
}
.main-navigation .menu-toggle .genericon {
	line-height: 40px;
}
.main-navigation.toggled .menu-toggle {
	background: #e06d5e;
	color: white;
}
@media screen and (max-width: 959px) {
	.main-navigation {
		position: relative;
		padding: 0;
		width: 100%;
		min-height: 40px;
	}
	.main-navigation:before, .main-navigation:after {
		content: '';
		display: block;
		position: absolute;
		left: 0;
		z-index: 0;
		height: 1px;
		background: #f1f2f3;
		padding-left: 0px;
		padding-right: 0px;
		margin-left: 0px;
		width: 100%;
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
	}
	.main-navigation:before {
		top: 0;
	}
	.main-navigation:after {
		bottom: 0;
	}
	.main-navigation .menu-toggle {
		display: inline-block;
	}
	.main-navigation.toggled .menu-wrapper {
		padding-top: 40px;
	}
	.main-navigation.toggled .menu-wrapper:before {
		content: '';
		display: block;
		position: absolute;
		top: 39px;
		left: 0px;
		padding: 0 0px;
		width: 100%;
		height: 1px;
		background: #f1f2f3;
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
	}
	.main-navigation.toggled .nav-menu {
		display: block;
		margin-bottom: -1px;
	}
	.main-navigation ul {
		position: relative;
		display: none;
		margin: 0;
		text-align: left;
		padding-left: 10px;
	}
	.main-navigation ul li {
		display: block;
		padding: 10px 0;
		margin: 0;
		min-height: 38px;
		border-bottom: 1px solid #f1f2f3;
		line-height: 18px;
	}
	.main-navigation ul li:first-child, .main-navigation ul li:last-child {
		margin-left: 0;
		margin-right: 0;
	}
	.main-navigation ul li a {
		padding: 0;
	}
	.main-navigation ul li a:hover, .main-navigation ul li a:focus, .main-navigation ul li a:active {
		color: orange;
	}
	.main-navigation ul li > ul {
		margin-top: 8px;
	}
	.main-navigation ul li.menu-item-has-children > ul > li:last-child {
		padding-bottom: 1px;
		margin-bottom: -1px;
	}
	.main-navigation ul .menu-item-has-children.toggle-on {
		padding-bottom: 1px;
	}
	.main-navigation ul .menu-item-has-children.toggle-on > .toggle-on {
		margin-top: 10px;
	}
	.main-navigation ul .menu-item-has-children > a {
		padding-right: 50px;
	}
	.main-navigation ul ul {
		display: none;
		position: inherit;
		top: auto;
		left: auto;
		float: none;
		padding: 0;
		margin: 0 0 0 40px;
		background: transparent;
		border: none;
		border-top: 1px solid #f1f2f3;
	}
	.main-navigation ul ul:before {
		content: '';
		display: block;
		position: absolute;
		top: -1px;
		left: -40px;
		width: 100%;
		height: 1px;
		background: #f1f2f3;
	}
	.main-navigation ul ul.toggle-on {
		display: block;
	}
	.main-navigation ul ul a {
		padding: 0;
		width: 100%;
		color: white;
	}
	.main-navigation ul ul a:hover, .main-navigation ul ul a:focus, .main-navigation ul ul a:active {
		color: #e06d5e;
	}
	.main-navigation ul ul li {
		padding: 10px 0;
		border-bottom: 1px solid #f1f2f3;
	}
	.main-navigation ul ul li:first-child {
		padding-top: 10px;
	}
	.main-navigation ul ul li:last-child {
		padding-bottom: 10px;
	}
	.main-navigation ul ul li > ul {
		margin-top: 8px;
	}
	.main-navigation ul ul ul {
		top: auto;
		left: auto;
		margin: 0 0 0 40px;
		border: none;
		border-top: 1px solid #f1f2f3;
	}
}
@media screen and (max-width: 959px) and (max-width: 767px) {
	.main-navigation:before, .main-navigation:after {
		padding-left: 20px;
		padding-right: 20px;
		margin-left: -20px;
	}
}
@media screen and (max-width: 767px) {
	.main-navigation.toggled .menu-wrapper:before {
		left: -20px;
		padding: 0 20px;
	}
	.main-navigation ul ul {
		margin-left: 20px;
	}
	.main-navigation ul ul:before {
		left: -20px;
	}
	.main-navigation ul ul ul {
		margin-left: 20px;
	}
}

PS: notice that it has different sizes for the screen, it adjust if you make the screen smaller (for example mobile) so i dont know if that should be taken into account when coming up with a solution, because i dont want to mess with the way it looks on mobile too much

Alright, I’m definitely going to check that talk out and determine from that if I’m going to take the effort/time to make a child theme.

Thanks again ??

Also what I dont quite understand is how a child theme will help in this case. I understand that the changes I make then will not be in the original theme. But if I update, the theme CSS snaps back to the original right? So you still have to adjust the CSS into the child’s one again.

I resolved it this time by downloading the backup I made before the update, extracting the CSS from that backup and replacing it with the updated theme CSS in filezilla.

Or are these just two ways of actually doing exactly the same?

Oh my god! You are the besstttt!

Thank you greatly.

Regarding your note about not editing my themes style.css, I knew I was getting in problems by doing it this way. But Im really new to making websites so Im just really glad I came this far already.

But is it too late to use the custom CSS now? because Ive made so much changes already in the CSS and even some PHP files.. I lost complete overview of the changes.

Thanks again, Im shocked at how good of a help your response was to me.

I found the problem must be in the style.css

Because I updated the theme which resolved the problem (but the CSS was overruled by the update) after I placed back the old CSS into the new updated page the problem was there again.