Below is my jquery script that makes hiding a certain content of the #over for example and when clicking the menu it hides the old one and shows the new one but when I call the new one the content gets all messed up quoting piece could help me?
Jquery:
$('.sub-menu a').click(function() {
var anchor;
var link = $(this).attr('href');
if (link.indexOf('#') !== -1) {
anchor = '#' + link.split('#').pop();
}
$('.id-sub').slideUp("slow");
if (anchor !== undefined) {
$(anchor).slideDown("slow").addClass('#sobre');
}
});
CSS:
/*Fonts Importadas*/
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700,900');
body{
width: 100%;
}
h3{
font-size: 20px;
font-family: 'Roboto', sans-serif!important;
font-weight: bold;
}
.title-slider{
font-size: 80px!important;
font-family: 'Roboto', sans-serif!important;
font-weight: 900!important;
color:white!important;
}
.sub-slider{
font-family: 'Roboto', sans-serif!important;
font-weight: 500!important;
font-size: 20px!important;
}
h2{
font-size: 48px;
font-family: 'Roboto', sans-serif!important;
}
.tp-caption > img:hover{
margin-top: 1px!important;
}
.tp-caption > img:hover{
margin-top: 1px!important;
}
p{
font-family: 'Roboto', sans-serif,'300'!important;
}
.elementor-widget-image .elementor-image img{
width: 100%!important;
}
.organograma-class{
background-color: #f6f6f6;
}
.equipe-class{
background-color: #275b6b;
}
.entry-content{
width: 100%;
}
.equipe-container{
height: 820px;
padding-left: 30px;
padding-right: 30px;
background-color: #275b6b;
}
.elementor-tabs-content-wrapper{
min-height: 768px;
background-color: #e9e8e3;
}
.elementor-tabs-wrapper{
background-color: white;
}
.elementor-widget-tabs .elementor-tab-title{
padding: 28px!important;
border-bottom-color: #e9e8e3!important;
font-family: 'Roboto', sans-serif!important;
font-weight: 500!important;
font-size: 14px;
}
.seta > .elementor-widget-container > .elementor-tabs > .elementor-tabs-wrapper >
.elementor-tab-title{
background-image: url(img/seta.png);
background-repeat: no-repeat;
background-size: 3%;
background-position: 92% 50%;
}
.tabs-sub-title{
font-family: 'Roboto', sans-serif!important;
font-weight: 500!important;
margin-top: -35px;
font-size: 14px!important;
}
.img-tabs .elementor-widget-container .elementor-image img{
min-height: 784px!important;
margin-right: 54px;
}
/*-------------*/
.site-branding{
width: 100%;
position: fixed;
height: 9%;
background-color: white;
clear: both;
}
.site-branding .warp{
margin-top: 0%;
}
.container{
float: left;
display: block;
width: 15%;
position: fixed;
top:9%;
height: 200px;
background-color:#f8f8f8;
min-height: 1200px;
}
.site-header {
background-color: #f8f8f8;
}
.site-content-contain{
float: right;
width: 85%;
margin-top: 94px;
}
.site-content{
padding: 0px!important;
}
.logo{
float: left;
width: 20%;
}
.logo .img-shevar{
margin-top: -48px;
margin-left: 3px;
height: 100px;
width: 283px;
}
.menu-menu-superior-container{
float: right!important;
width: 70%;
text-align: right;
}
.menu-menu-superior-container ul{
display: block;
margin-right: 2px;
margin-top: -48px;
}
.menu-menu-superior-container ul li{
display: inline-block;
padding: 36px;
}
.menu-menu-superior-container ul li:hover{
background-color: #857f77;
}
.menu-menu-superior-container ul li a:hover{
color: white!important;
}
.menu-menu-superior-container ul li a{
list-style: none;
width: 15%;
font-family: 'Roboto', sans-serif!important;
font-weight: 300!important;
color:#938e87!important;
}
/*Conteudo*/
.wrap{
margin: 0px auto;
width: 100%;
}
strong{
font-weight: 300;
}
/*Breadcrumbs*/
#trilha{
width: 100%;
background-color: #969188;
height: 130px;
position: fixed;
z-index: 1;
}
#trilha li{
display: inline-block;
text-align: left;
margin-top: 50px;
padding: 5px;
}
#trilha li a{
margin-left: 242px;
color: white;
}
#trilha li strong,.separador{
color: white;
font-weight: 300;
}
/*Formulario*/
.wpcf7-form p{
width: 55%;
}
#serviço{
position: absolute;
width: 200px;
left: 50%;
margin-left: -100px;
}
#orgonograma{
position: absolute;
width: 200px;
left: 50%;
margin-left: -100px;
}
/*
#organograma,#equipe,#estruturacao-capital,#cons-empresarial,
#mercado,#risco-ativos,#aquisicoes,#venda-ativos,#operacao-credito{
position: absolute;
width: 1px;
height: 1px;
left: 0;
margin-top: -100px;
background-color: transparent;
z-index: -1;
}
#investimentos-participacoes{
position: absolute;
width: 1px;
height: 1px;
left: 0;
margin-top: 1000px;
background-color: transparent;
z-index: -1;
} */
.site-footer {
margin-top:0px;
}
/*Media Query*/
@media screen and (max-width: 768px) {
#cssmenu,.container {
display: none;
}
.site-content-contain {
width: 100%;
margin-top: 94px;
}
.menu-menu-superior-container{
display: none;
}
.elementor-size-default{
width: 100%!important;
height: 100px!important;
margin: 0px!important;
padding: 0px!important;
}
.title-inicio{
white-space: nowrap;
}
#trilha li a{
margin-left: 0px;
text-align: left;
}
.img-tabs{
display: none;
}
.wpcf7-form p{
width: auto;
}
.logo{
width: 40%;
}
.logo .img-shevar{
height: 100px;
width: 283px;
}
.site-branding {
padding: 3em 0;
}
button#responsive-menu-button{
top: 23px!important;
ackground: #f8f8f8 !important
}
.equipe-container{
height: auto!important;
display: block;
}
.title-slider{
font-family: 'Roboto', sans-serif!important;
font-weight: 900!important;
color:white!important;
font-size: 65px!important;
margin: 0px!important;
margin-left: 0px!important;
}
.sub-slider{
font-family: 'Roboto', sans-serif!important;
font-weight: 500!important;
font-size: 15px!important;
margin-left: 0px!important;
display: inherit!important;
}
.responsive-menu-inner::before{
background: #a77b7b!important;
}
.responsive-menu-inner::after{
background: #a77b7b!important;
}
.responsive-menu-inner{
background: #a77b7b!important;
}
}
@media screen and (max-width: 480px) {
.title-slider{
font-family: 'Roboto', sans-serif!important;
font-weight: 900!important;
color:white!important;
font-size: 38px!important;
}
.sub-slider{
display: none!important;
}
}
@media screen and (max-width: 600px) {
.title-slider{
font-family: 'Roboto', sans-serif!important;
font-weight: 900!important;
color:white!important;
font-size: 38px!important;
}
.sub-slider{
display: none!important;
}
}
@media screen and (max-width: 992px){
.container{
top:11%!important;
}
}
@media screen and (max-width: 768px) {
.logo .img-shevar{
height: 62px;
margin-top: -26px;
}
}
@media screen and (max-width: 1339px){
.equipe-container{
height: auto!important;
display: block;
}
}
html:
<?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package WordPress
* @subpackage Twenty_Seventeen
* @since 1.0
* @version 1.0
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
<?php wp_enqueue_script('jquery'); ?>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyseventeen' ); ?></a>
<header id="masthead" class="site-header" role="banner">
<?php get_template_part( 'template-parts/header/header', 'image' ); ?>
?php if ( has_nav_menu( 'top' ) ) : ?>
<div class="navigation-top">
<div class="wrap">
<!--Inserido menu TOP-->
<?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
</div><!-- .wrap -->
</div><!-- .navigation-top -->
</header><!-- #masthead -->
<?php endif; ?>
<div class="container">
<?php
wp_nav_menu(array(
'menu' => 'main-menu', // This will be different for you.
'container_id' => 'cssmenu',
'walker' => new CSS_Menu_Maker_Walker()
));
?>
</div>
<?php
/*
* If a regular post or page, and not the front page, show the featured image.
* Using get_queried_object_id() here since the $post global may not be set before a call to the_post().
*/
if ( ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) && has_post_thumbnail( get_queried_object_id() ) ) :
echo '<div class="single-featured-image-header">';
echo get_the_post_thumbnail( get_queried_object_id(), 'twentyseventeen-featured-image' );
echo '</div><!-- .single-featured-image-header -->';
endif;
?>
<div class="site-content-contain">
<div class="trilha">
<?php $pagename = get_query_var('pagename');
if($pagename){
bloglite_breadcrumb();
}
?>
</div>
<!--Condição para mostrar (breadcrumb) -->
<div id="content" class="site-content">