Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

André Calazans

Problema com div transparente no responsivo

Por , em Desenvolvimento frontend

Recommended Posts

André Calazans    0

André Calazans
Postado

Opa, gente! Boa Tarde!
Estou com um probleminha um tanto chato, não sou muito bom em html nem css e estou editando um temo no wordpress, até ai tudo bem, mas após alterar o background da minha nav-bar de ver para azul por algum motivo, do capeta, o sub-menu responsivo da nav-bar fica transparente ://

Alguém poderia me ajudar? O site é esse: www.zona404.com e os códigos:

HTML:

 

 

<!DOCTYPE html>
<html  <?php language_attributes();?>>
  <head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title><?php wp_title('»','true','right'); ?><?php bloginfo('name'); ?></title>
    <meta name="description" content="<?php echo get_option('fullby_description'); ?>" />
    
    <!-- Favicon -->
    <link rel="icon" href="<?php bloginfo('stylesheet_directory'); ?>/img/favicon.png" type="image/x-icon"> 

    <!-- Bootstrap core CSS -->
    <link href="<?php echo get_stylesheet_directory_uri(); ?>/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/font-awesome/css/font-awesome.min.css">

    <!-- Custom styles for this template -->
    <link href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" rel="stylesheet">
  
    
    <!-- Google web Font -->
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900,100' rel='stylesheet' type='text/css'>

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    
    <!-- Analitics -->
	<?php if (get_option('fullby_analytics') <> "") { echo get_option('fullby_analytics'); } ?>
    
	<?php wp_head(); ?> 
	
</head>
<body <?php body_class(); ?>>

    <div class="navbar navbar-inverse navbar-fixed-top">
     
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainmenu">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <h1>
<p style="text-align: center;">
<a class="navbar-brand" href="<?php echo home_url(); ?>"> <a href="http://www.zona404.com/"><img class="alignnone size-full wp-image-22" src="http://www.zona404.com/wp-content/uploads/2014/05/logo_white.png" alt="" width="75" height="37"/></a>
</p>
</h1>
        </div>
        
        <div id="mainmenu" class="collapse navbar-collapse">
          <?php /* Primary navigation */
			wp_nav_menu( array(
			  'menu' => 'main',
			  'depth' => 2,
			  'container' => false,
			  'menu_class' => 'nav navbar-nav navbar-right',
			  //Process nav menu using our custom nav walker
			  'walker' => new wp_bootstrap_navwalker())
			);
			?>
        	<div class="col-sm-3 col-md-3 pull-right search-cont">
		        <form class="navbar-form" role="search" method="get" action="<?php echo home_url() ; ?>">
			        <div class="input-group">
			            <input type="text" class="form-control" placeholder="Pesquisa" name="s" id="srch-term">
			            <div class="input-group-btn">
			                <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
			            </div>
			        </div>
		        </form>
	        </div>

	</div><!--/.nav-collapse -->
    
    </div>
    
    <?php if (is_home()) { ?>
    
    	 <?php if (!is_paged()){ ?> 
    
	    	 <div class="row featured">
    
					<?php
					$specialPosts = new WP_Query();
					$specialPosts->query('tag=featured&showposts=3');
					?>
					
					<?php if ($specialPosts->have_posts()) : while($specialPosts->have_posts()) : $specialPosts->the_post(); ?>
			  
					    <div class="col-sm-4 col-md-4 item-featured">
					    
					    	
							<a href="<?php the_permalink(); ?>">
				
					    		<div class="caption">
						    		<div class="cat"><span><?php $category = get_the_category(); echo $category[0]->cat_name; ?></span></div>
						    		<div class="date"><i class="fa fa-clock-o"></i> <?php the_time('j M , Y') ?>  
						    		
						    			<?php 
										$video = get_post_meta($post->ID, 'fullby_video', true );
										
										if($video != '') { ?>
						             			
						             		<i class="fa fa-video-camera"></i> Video
						             			
						             	<?php } else if (strpos($post->post_content,'[gallery') !== false) { ?>
						             			
						             		<i class="fa fa-th"></i> Gallery
			
					             		<?php } else {?>
		
					             		<?php } ?>

						    		
						    		</div>
						    		
						    		<h2 class="title"><?php the_title(); ?></h2>
						    		
					    		</div>

				                <?php $video = get_post_meta($post->ID, 'fullby_video', true );
					  
								if($video != '') {?>
					
									 <img class="yt-featured" src="http://img.youtube.com/vi/<?php echo $video ?>/hqdefault.jpg" class="grid-cop"/>
										
								<?php 				                 
		                   
				             	} else if ( has_post_thumbnail() ) { ?>
			
			                        <?php the_post_thumbnail('quad', array('class' => 'quad')); ?>
			                        				   
			                    <?php } ?>
						    	
						    </a>
						
						</div>
					
					<?php endwhile;  else : ?>
			
						<p>Sorry, no posts matched your criteria.</p>

					<?php endif; ?>	
				 		
				</div>	
				
			<?php } else { ?>
			
				<div class="row spacer"></div>	
			
			<?php } // end if(!is_paged) ?>
				
	<?php } else { ?>	
	
		<div class="row spacer"></div>		   
			
	<?php  } // end if(is_home) ?>

 

 

CSS:

 

/*
Theme Name: FULLBY 
Theme URI: 	http://www.marchettidesign.net/fullby/demo/'>http://www.marchettidesign.net/fullby/demo/
Description:Responsive Grid Wordpress Theme based on Boostrap 3, Font Awesome and Isotope.
Version: 	1.3
Author:		Andrea Marchetti
Author URI:	http://www.marchettidesign.net/chisono'>http://www.marchettidesign.net/chisono
Site: 		http://www.marchettidesign.net
Tags:		responsive-layout,custom-menu, featured-images, fluid-layout, full-width-template, left-sidebar, right-sidebar, theme-options

Copyright (c) 2014 Andrea Marchetti  
http://www.marchettidesign.net

FULLBY is free to use for personal and commercial projects.
You can NOT redistribute FULLBY theme or parts from it.
Attribution is not required, but much appreciated.
 
The software is provided "as is", without warranty of any kind,
express or implied, including but not limited to the warranties
of merchantability, fitness for a particular purpose and
noninfringement. In no event shall the authors or copyright
holders be liable for any claim, damages or other liability,
whether in an action of contract, tort or otherwise, arising
from, out of or in connection with the software or the use or
other dealings in the software.

*/

body, html {margin:0;padding: 0px;height:100%;font-family: lato;}
body.admin-bar .navbar-fixed-top {position:fixed;top: 32px;z-index: 1000;height: 40px;}

/* link color */
a{color:#5092cd;}
a:focus, a:hover{color:#64b5ff;}


/* Menus */
.navbar {margin:0;border:none;border-radius:0;background-color: #3598db;background-image: none;text-transform: uppercase;}
.navbar h1{margin:0;}
.navbar-inverse .navbar-brand {padding-bottom: 11px;color:#282826; letter-spacing: -2px;font-weight: 300; font-size: 22px;}
.navbar-inverse .navbar-brand .arrow{margin-right:5px;}
.navbar-nav ul{list-style-type: none}
.navbar-inverse .navbar-nav > li > a {color:#000;font-weight: 300;}
.navbar-inverse .navbar-nav > li > a:hover {background:#4783af;font-weight: 300;}

  .navbar-inverse .navbar-nav > .active > a, 
  .navbar-inverse .navbar-nav > .active > a:hover, 
  .navbar-inverse .navbar-nav > .active > a:focus {background-color: #282826;color: #FFFFFF;}
  
  .navbar-sub{background: #f0ede3;}
  .navbar-sub .navbar-nav > li > a{color:#666; }
  .navbar-sub .navbar-nav > li > a:hover{background: #dcd9d0;color:#000;}
  
	

/* Featured Content */
.featured{display: block;background: #000;min-height: 50px}
.featured .item-featured{position: relative;overflow:hidden;padding:0;}

	.featured img{z-index: 50;width: 100%; height:auto;opacity:0.6;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;}
	
	.featured .item-featured:hover > a img{opacity:1; 
	    -webkit-transform:scale(1.1);
	    -moz-transform:scale(1.1);
	    -ms-transform:scale(1.1); 
	    -o-transform:scale(1.1);
	    transform:scale(1.1);
	    }
	    
	 .yt-featured{width:132.9%!important;;}
	
	.featured .caption{position: absolute; bottom:0;z-index:100;width:100%; background: url(img/bg.png) repeat-x;color:#fff;}
	.featured .cat{padding:0 20px;color: #fff;text-transform: uppercase;text-shadow: 0 0 3px #000;font-weight: 700; font-size:12px;}
	.featured .date{padding:0 20px;color: #00ebbe;text-transform: uppercase;text-shadow: 0 0 3px #000;font-weight: 700; font-size:12px;}
	.featured .title{margin:0;padding:5px 25px 25px 25px; text-transform: uppercase; font-weight: 400;font-size: 27px;}
	
	.spacer{height: 50px;}
	
	
/*** Grid ***/
.cont-grid{float:right;padding: 10px 0 0 5px;border-left: 1px solid #eee;}

	.cont-grid .post{padding:20px 25px 20px 15px;}
	.grid-cat{margin:0px 0 0 0; color: #333;text-transform: uppercase; font-weight: 700; font-size: 13px;}
	.grid-tit{margin:10px 0 10px 0; text-transform: uppercase; font-weight: 300;font-size: 28px; }
	.grid-tit a{color:#333;}
	.grid-tit a:hover{color:#ff0055;}
	.grid-cop{padding: 10px 0 0px 0;}
	.grid-text{padding:15px 0 0 0;}
	
	.grid .item {float: left;margin: 0 5px 10px 5px;width: 20%;height: auto;border-right: 1px solid #eee; border-bottom: 1px solid #eee;background: #fff;}
	.grid .item img{margin:0;width:100%;height:auto;line-height: 0;}
	.grid .item-w2 {width: 40%;}
	.grid .item-h2 {height: 322px;}
	.grid .item-h3 {height: 485px;}
	
	
	/* isotope */
	.isotope .isotope-item {
		-webkit-transition-duration: 0.8s;
		-moz-transition-duration: 0.8s;
		transition-duration: 0.8s;
		-webkit-transition-property: -webkit-transform, opacity;
		-moz-transition-property: -moz-transform, opacity;
		transition-property: transform, opacity;
	}
	
	
	/* Pagination */
	.pagination{padding: 0 0 0 15px;}
	.pagination span, .pagination a{padding: 9px 14px;border: 1px solid #eee;}
	
	
/* Single */
.single{float:right;margin:0;padding:0;border-left: 1px solid #eee;}

	.sing-cop{width:100%; height:auto;}
	.sing-tit-cont{position: relative;margin:-69px 0 0 0;margin-left:10%; padding:3% 5% 1% 5%;width:80%;background:#fff;}
	.sing-tit{margin:10px 0 20px 0; text-transform: uppercase; font-weight: 300;font-size: 33px;}
	.sing-spacer{padding:3% 6%;}
	.sing-cont{position: relative;margin-left:10%;width:80%;font-size: 16px; line-height: 26px;}
	.single-in{padding:0;}
	.meta{margin:0;padding:0;color:#999;text-transform: uppercase;}
	.cat{margin:10px 0 0 0; color: #333;text-transform: uppercase; font-weight: 700; font-size: 13px;}
	.tag-post{color:#02c29d; text-transform: capitalize;}
	
	.spacer-sing{height:100px;}
	
	/* Comments */
	#comments h3{margin-bottom: 20px;text-transform: uppercase; font-weight: 300; font-size: 20px;}
	
	ol.commentlist { list-style:none; margin:0 0 1em; padding:0; text-indent:0; }
	ol.commentlist li.comment { border-top:1px solid #eee; padding:1em; }
	ol.commentlist li.comment div.vcard cite.fn { text-transform: uppercase; font-size: 14px }
	ol.commentlist li.comment div.vcard img.avatar { float:left; margin: 6px 1em 1em 0; border-radius:50px;}
	ol.commentlist li.comment div.comment-meta { font-size:12px; }
	ol.commentlist li.comment ul {  margin:0 0 1em 2em; }
	ol.commentlist li.comment div.reply { font-size:11px; margin-left:80px}
	ol.commentlist li.comment div.reply a { font-weight:bold; }
	ol.commentlist li.comment ul.children { list-style:none; margin:1em 0 0; text-indent:0; }
	ol.commentlist li.comment ul.children li.depth-2 { border-left:1px solid #eee; margin:0 0 .25em .25em; }
	ol.commentlist li.comment ul.children li.depth-3 { border-left:1px solid #eee; margin:0 0 .25em .25em; }
	ol.commentlist li.comment ul.children li.depth-4 { border-left:1px solid #eee; margin:0 0 .25em .25em; }
	ol.commentlist li.even { background:#fff; }
	ol.commentlist li.odd { /*background:#f9f9f9;*/ }
	ol.commentlist li.parent { border-left:1px solid #eee; }
	ol.commentlist li.bypostauthor .fn{	font-weight: bold;}

	input{ margin-right:10px;padding: 10px;border:none;background: #eee;}
	textarea{ float:left;padding:10px;width:90%;border:none;background: #eee;}
	#submit{margin-top:10px;background: #00ebbe; color:#fff;text-transform: uppercase;padding: 15px 20px;}
	
	/* Video Resposnive */
	.videoWrapper {position: relative;margin-bottom: 70px;padding-top: 25px;padding-bottom: 56.25%; /* 16:9 */height: 0;}
	.videoWrapper iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
	
	.link-video{position:relative;}
	.link-video i{position: absolute; top:50%; left:50%;margin:-20px 0 0 -25px ;background: url(img/circle-white.png) no-repeat center center;}


	/* Gallery */
	.gallery {margin: 0 0 10px 0!important;}
	.gallery-item {float: left;margin: 0!important;width: 33.333333%;text-align: center;}
	.gallery img { margin: 5%!important;width: 90%!important;border: none!important;}
	.gallery-caption {margin-left: 0;}


	
/* Primary Sidebar */
.sidebar{float:left;}	
.sidebar .widget{padding: 10px 10px 20px 10px;}
.sidebar .widget h3{text-transform: uppercase;font-weight:700;font-size: 14px;}
.sidebar .widget a{ display:block; padding: 10px 15px;border-bottom: 1px solid #eee;}
.sidebar .widget ul{padding:0;list-style-type: none;}
.sidebar .widget ul li a{padding-left: 0;}

	.sidebar .social{ float:left;margin: 20px 0 30px 0;width: 100%;}
	.sidebar .social a{display: block;float:left;padding:10px;}

	/* Tab */
	.sidebar #myTab{margin-top:20px;}
		.tab-spacer{padding:0 10px 0 10px;}
		.tab-content{float:left;margin: 10px 0 60px 0; width:100%;}
		.tab-content a{float:left;padding: 10px 0 0 0;min-height: 75px;width: 100%;border-bottom:1px solid #f0efef;text-decoration: none;}
		.tab-content a:last-child{border:none;}
		.tab-content img{float:left;margin:0 20px 10px  10px;padding:0; width:60px; height:60px;border:0; border-radius:50%;}
		.tab-content .title{ margin: 5px 0 0 0;color:#000; text-transform: uppercase;font-weight: 400;font-size: 16px;}


/* Secondary Sidebar */
.sec-sidebar{float:right;margin: 0;padding:0;width:100%;}
.sec-sidebar .widget{padding: 10px 10px 20px 10px;}
.sec-sidebar .widget a{ display:block; padding: 10px 15px;border-bottom: 1px solid #eee;}
.sec-sidebar .widget h3{text-transform: uppercase;font-weight:700;font-size: 14px;}
.sec-sidebar .widget ul{padding:0;list-style-type: none;}
.sec-sidebar .widget ul li a{padding-left: 0;}


/* Footer */
.footer{float:left; padding:20px; width:100%;background: #333;color:#fff;}
.footer span{text-transform: uppercase;}


/* General */
.row{margin:0;padding:0;}
.panel{background: #eee;}

.sticky {border-right:3px solid #eee;border-bottom: 3px solid #eee }

.wp-caption {border: 1px solid #eee; text-align: center; padding: 10px;}
.wp-caption img {margin: 0;padding: 0;border: 0 none; width:100%!important;height:auto;}
.wp-caption p.wp-caption-text {font-size: 1em; line-height: 17px; padding: 8px; margin: 0; }

/* only in home caption full width */
.cont-grid .wp-caption {max-width:100%;width: 100% !important;height:auto; }


.alignleft{float:left; margin-right: 20px;}
.alignright{float: right; margin-left: 20px;}
.aligncenter{margin:  0 auto;display: block}


#s{width: 100%}
#searchsubmit{background-color: #fff;color:#fff}


/* Search */
.result{margin-left:5px; text-transform: uppercase;}
#srch-term{border:none;background:none; box-shadow: none;}
.search-cont{padding:0;}
.btn-default{border: none; background: none;}



@media (max-width: 1000px) { 
	
	.featured{margin-top:50px}
	.cont-grid, .sidebar{width:100%;}	
	.single{float:left; width:100%;border-left: none;}	
	
}


@media (max-width: 760px) { 

	#mainmenu{float:left;width:100%;}
	
	.navbar-form {border:none}
	.sing-tit-cont{margin-left:5%; width:90%;}
	.sing-cont{margin-left:5%;width:90%;}
	
	.navbar-toggle {border:none}
	.navbar-toggle:hover {background:#fff!important}
	.navbar-toggle .icon-bar{background:#333!important}
	
}

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

André Calazans, acessei agora e o submenu apareceu com o fundo azul, veja a imagem: photo1.jpg

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

sub-menu responsivo da nav-bar fica transparente ://

 

Poisé, vai entender! Em dispositivos mobile ele não fica transparente :(

 

André, é pra fica transparente ou não?

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito