Problem by clicking on anchor menu #

Asked

Viewed 350 times

0

Below is my jquery script that hides a certain content of #about for example and when clicking on the menu it hides the old and shows the new but when I call the new content gets all messy 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">
html css wordpress website

  • The code posted shows nothing.

  • is because this in wordpress the problem is this when I click on the menu it will go down but the content is hidden through the menu I will send a photo to see 1min

  • is the same thing as me clicking on the menu and when it will display the content it cuts it does not get centered on the screen as it should

No answers

Browser other questions tagged html css wordpress website

You are not signed in. Login or sign up in order to post.