Пользовательский макет поиска Google застрял в панели навигации - PullRequest
Новая
       21

Пользовательский макет поиска Google застрял в панели навигации

0 голосов
/ 09 февраля 2019

всякий раз, когда я выполняю поиск в пользовательском поиске, страница списка файлов застревает в навигационной панели, я знаю, что я делаю что-то не так в CSS, поэтому, пожалуйста, помогайте мне

всякий раз, когда я делаюПоиск в пользовательском поиске Страница списка файлов застряла в навигационной панели. Я знаю, что я делаю что-то не так в CSS, поэтому, пожалуйста, помогите мне 

<script>
  (function() {
    var cx = '007483986558692176706:zyc-ibnftso';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search>

</gcse:search>
	/* responsive navigation bar: CSS */

.navbar {
  position: fixed;
  z-index: 100;
  background-color: #0B0C1F;
  overflow: hidden;
  margin: auto;
/*   background-color:	#ecc9cd; */
  width: 100%;
  left:0;
  top:0;
}

.navbar li.logo,
.navbar li.navbar_items {
  list-style-type: none;
  display: inline-block;
}

.navbar li a {
  font-family: 	Gadget;
  font-size: 1.46em;
  color: white;
  display: inline-block;
  text-align: center;
  padding: 8px 10px 0px 4px;
  text-decoration: none;
}

.navbar li.navbar_items a:hover {
  border-bottom-style: solid;
  border-bottom-color: white;
  /*   padding-bottom: 5px; */
}

.navbar li.icon {
  display: none;
}

.div_navbar_items {
  float: right;
  padding-right:1%;
}



/* responsive navigation bar: CSS */


/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("navbar_name"). Show the list item that contains the link to open and close the topnav (li.icon) */

@media screen and (max-width:875px) {
  .navbar li.navbar_items {
    display: none;
  }
  .navbar li.icon {
    float: right;
    display: inline-block;
    position: absolute;
    right: 0;
    top: 19px;
  }
}


/* The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon. This class makes the navbar look good on small screens */

@media screen and (max-width:875px) {
  .navbar.responsive {
    position:fixed;
    width: 100%;
    height: 100vh;
  /*  background-color: rgba(236,201,205, 1);*/
    transition: background-color .6s;
  }
  
  .navbar.responsive li.logo {
    float: left;
    display: block;
  }
  .navbar.responsive .div_navbar_items {
    float: none;
    padding-right:0;
  }
  
  .navbar.responsive li.navbar_items {
    display: block;
    padding: 50px;
    font-size: 25px;
  }
  .navbar.responsive li.navbar_items a {
    display: block;
    text-align: center;
  }
  
  .navbar.responsive li.navbar_items a:hover{
    color:#17171e;
    border-bottom-color: transparent;
    
  }
  

  
}

/* end of navgation bar styling - responsive */






/* Active class of navigation bar*/
.active {
    color: #f4dc22 !important;
}

.navbar ul li a, .navbar ul li a:visited {
    color: #ffffff;
}












/*Resize the wrap to see the search bar change!*/
.wrap{
  width: 35%;
  display: inline-block;
  padding-top: 1px;
  position: absolute;
  top: 50%;
  left: 32%;
  transform: translate(-50%, -50%);
}

			/* END Of Top Naviagtion Search Bar*/








/*new css added by designer (21-01-2019)*/
@media (max-width:800px){
.navbar li.icon {
	top: 0;
}



.navbar li.logo {
	list-style-type: none;
	display: inline-block;
	float: left;
}
.wrap {
	width: 35%;
	position: relative;
	top: 1;
	left: 0;
	transform: translate(0%, 00%);
	float: left;
}
.topnav ul {
	margin: 0 !important;
	padding: 15px !important;
	float: left;
	width: 100%;
}
.navbar li.icon {
	top: 0;
	position: relative;
}
.navbar li a {
	padding: 0px 10px 5px 10px;
	text-decoration: none;
	float: right;
	border-radius: 2px;
}
.navbar.responsive {
	position: fixed;
	width: 100%;
	height: 300px;
	background-color: rgba(236,201,205, 1);
	transition: background-color .6s;
}
.navbar.responsive .div_navbar_items {
	float: left;
	padding-right: 0;
	width: 100%;
	position: absolute;
	left: 0;
	top: 80px;
	padding: 0 15px;
}
.navbar.responsive li.navbar_items a {
	display: block;
	text-align: center;
	width: 100%;
	float: left;
}
#welcome .content {
	padding: 15px;
	text-align: justify;
}
#post {
	float: left;
	width: 100%;
}
#list {
	float: right;
	width: 100%;
}
ul.style1 {
	padding: 0em 0em 0em 0em;
}


.main {
	/* background-color: #b6dc79; */
	position: relative;
	max-width: 100%;
	margin: auto;
}
ul.style1 li {
	text-align: center;
}
#wrapper3 {
	padding: 15px;


}
.column:nth-child(2n+1) {
	clear: both;
}
.navbar.responsive li.navbar_items {
	padding: 0;
}
.navbar.responsive {
	background-color: #000;
}
.navbar.responsive li.navbar_items a {
	display: block;
	text-align: center;
	width: 100%;
	float: left;
	font-size: 24px;
	margin-bottom: 10px;
}
.navbar.responsive li.navbar_items a:hover {
	display: block;
	text-align: center;
	width: 100%;
	float: left;
	font-size: 24px;
	margin-bottom: 10px;
}
.wrap {
	padding: 0;
	height: 36px;

}
#header-wrapper2 {
	padding: 160px 0;
}
.wrapper.style5 {
	background-color: #ffffff;
	color: #4E4852;
	padding: 15px;
	text-align: justify;
}
}
@media (max-width:767px){
#header-wrapper {
	overflow: hidden;
	padding: 140px 0;
	box-sizing: border-box;
}
#newsletter .content {
	width: 100%;
	margin: 0px auto;
}
}

@media (max-width:480px){
    .icon-bar a {
	display: inline-block;
	position: static;
	text-align: center;
	padding: 5px;
	transition: all 0.3s ease;
	color: white;
	font-size: 40px;
	width: 20%;
	float: left;
}
.content {
	padding: 0;
}
#newsletter {
	padding: 15px;
}
form .submit {
	margin-top: 0em;
	background: #e97874;
	line-height: 1.5em;
	font-size: 14px;
}
.title h2 {
	font-size: 1.8em;
	color: rgba(255,255,255,0.9);
}
.title .byline {
	font-size: 14px;
}
.navbar li.logo a {
	float: none;
	display: inline-block;
}
}
@media (max-width:435px){
.navbar li.logo {
	list-style-type: none;
	display: inline-block;
	float: left;
	width: 100%;
	text-align: center;
	margin-bottom: 10px;
}
.navbar li a {
	float: none;
	display: inline-block;
}
.wrap {
	width: 70%;
}
.topnav ul {
	padding: 10px !important;
}
.navbar.responsive .div_navbar_items {
	top: 120px;
}
.navbar.responsive li.navbar_items a {
	display: block;
	text-align: center;
	width: 100%;
	float: left;
	font-size: 18px;
	margin-bottom: 0px;
	padding: 10px !important;
	text-transform: uppercase;
}
.navbar.responsive li.navbar_items a:hover {
	display: block;
	text-align: center;
	width: 100%;
	float: left;
	font-size: 18px;
	margin-bottom: 0px;
	padding: 10px !important;
	text-transform: uppercase;
}
#welcome {
	padding: 1em 0em;
}
.navbar li a {
    padding: 0px 10px 3px 10px;
    text-decoration: none;
    float: right;
    border-radius: 2px;
    font-size: 26px;
    color: #fff;
    opacity: 1;
}
.navbar li.logo a {
	float: none;
	display: inline-block;
}
}


iframe{
    width: 100% !important;
}
  <!--this is the search form-->          
<div class="wrap">
   <?php include('search_form.php');?>
</div>
      <!--search form end-->
...