Discussione chiusa

Problema Risolto Menu Buggato

RE: Menu Buggato

11-09-2016, 12:38
#1
E niente, un secondo dopo che dico risolto arriva un altro problema D:
Ti cito il messaggio che stavo scrivendo all'altro topic senza rifarlo

Citazione:no scheeerzavo lol. Ho altri problemi... senza aprire altri topic.
praticamente ho applicato quel menù, e si vede tutto strano e sgranato a differenza di come dovrebbe essere :/
.clearfix:before,
.clearfix:after{
    content:"";
    display:table
}
.clearfix:after{
    clear:both
}
.clearfix{
    zoom:1
}
table  {
    border-collapse:collapse
}
td, th {
    border:1px solid #ddd;
    padding:8px;
}
@font-face {
  font-family: arial;
  src: url(arial.ttf);
  font-family: 'arial' !important;
}
a {
    color: #0097cf !important;
    transition: all 250ms;
}
a:hover {
    color: #000066 !important;
}
body {
    margin: 0;
    padding: 0;
    background: url("http://i.imgur.com/LEa9lx9.png");    
    font-family: 'arial' !important;
}
input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
    background: #0064c7 !important;
    border: none !important;
    padding: 7px 10px !important;
    color: white !important;
    transition: all 500ms;
}
input[type="button" i]:hover, input[type="submit" i]:hover, input[type="reset" i]:hover, input[type="file" i]:hover::-webkit-file-upload-button, button:hover {
    background: #000066 !important;
}
.sogno a {
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
}
.sogno {
    float: left !important;
    width: 30% !important;
    padding: 5px;
    background: #e2e2e2;
    border: 1px solid transparent;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.sogno:hover {
    border: 1px solid #0064c7;
}
.imgS {
    height: 200px !important;
    width: 300px !important;
    text-align: center;
    border: 2px solid #0064c7;
}
.welcome {
    text-align: center;
    background: rgba(0, 100, 199, 0.45);
    font-size: 22px;
    border-radius: 3px;
    padding: 15px;
    color: #000066;
}
.welcome a {
    font-size: 20px;
    font-weight: bold;
    padding: 7px 10px;
    text-decoration: none;
    color: white !important;
    background: #e62117;
    transition: all 250ms;
    border-radius: 4px;
}
.welcome a:hover {
    color: white !important;
    background: #cc181e;
}
.header {
    padding: 0;
    background: url("http://i.imgur.com/rX4xXh4.png?1");
    background-position: center;
    height: 200px !important;
}
.header img {
    margin-bottom: 200px !important;
}

.header {
    font-weight: bold;
    text-align: left;
    color: #fff;
}
.buttonT a {
    padding: 5px 8px;
    text-decoration: none;
    color: white !important;
    background: #e62117;
    transition: all 250ms;
    border-radius: 2px;
}
.buttonT a:hover {
    color: white !important;
    background: #cc181e;
}
.title {
    background: #0064c7;
    color: white;
    font-weight: bold;
    padding: 10px;
    padding-left: 100px !important;
    padding-right: 100px !important;
}
.content {
    width: 90%;
    padding: 20px;
    background: white;
    border: 2px solid #0064c7;
    box-shadow: 0 0 100px #0064c7;
    margin: auto;
    margin-bottom: 40px;
}

.sticky {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 100;
  border-top: 0;
}
.reglog a {
    padding: 5px 8px;
    text-decoration: none;
    color: white !important;
    background: #e62117;
    transition: all 250ms;
    border-radius: 4px;
}
.reglog a:hover {
    color: white !important;
    background: #cc181e;
}
.reglog {
    background: rgba(255,255,255,0.75);
    border: 2px solid #0064c7;
    border-radius: 3px;
    padding: 7px 10px;
    color: #000066;
    margin-top: 15px !important;
    margin-right: 15px;
    float: right !important;
}
.rltable td {
    border: none !important;
}
.rltable tr {
    border: none !important;
}
@media (min-device-width : 320px) and (max-device-width : 480px) {
.sogno {
    float: none !important;
    width: 100% !important;
    padding: 5px;
    background: #e2e2e2;
    border: 1px solid transparent;
    text-align: center;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 20px;
    margin-bottom: 20px;
}
}

@media (min-device-width : 768px) and (max-device-width : 1024px) {
.sogno {
    float: left !important;
    width: 45% !important;
    padding: 5px;
    background: #e2e2e2;
    border: 1px solid transparent;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}
}
// BOOTSTRAP MENU
.navbar-toggle {
  border: 0;
  padding: 15px;
  margin: 0;
  height: 50px;
  border-radius: 0;
  background: #16a085!important;
}

.icon-bar {
  transition: all .3s;
  background: #fff!important;
  // height: 3px!important;
}

.top-bar {
  // transform-origin: 45%;
  transform: translateY(6px) rotate(45deg);
}

.middle-bar {
  opacity: 0;
  // transform: translateX(-100%);
}

.bottom-bar {
  // transform-origin: 40%;
  transform: translateY(-6px) rotate(-45deg);
}



.navbar-toggle.collapsed {
  .top-bar {
    top: 0;
    transform: rotate(0);
  }
  
  .middle-bar {
    opacity: 1;
    // transform: translateY(0);
  }
  
  .bottom-bar {
    top: 0;
    transform: rotate(0);
  }
}


// CUSTOM MENU
.menuWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px 10px;
  background: darken(#16a085, 5%);
}

.menu {
  display: block;
  height: 5px;
  background: #fff;
  width: 30px;
  position: relative;
  
  transition: all .3s;
  
  &:before {
    content: "";
    position: absolute;
    top: -10px;
    background: #fff;
    width: 30px;
    height: 5px;
    
    transition: all .3s;
  }
  
  &:after {
    content: "";
    position: absolute;
    top: 10px;
    background: #fff;
    width: 30px;
    height: 5px;
    
    transition: all .3s;

  }
}

.is-active {
  background: transparent;
  
  &:before {
    top: 0;
    transform: rotate(45deg);
  }
  
  &:after {
    top: 0;
    transform: rotate(-45deg);
  }
}

p {
  font-size: 17px;
  color: #fff;
}
<?php
session_start();

require_once('../threedice-on/lib/Users.class.php');
$login = New Users;
?>
<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width" >
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
   <title>3Dice-on</title>
  
   <link rel="stylesheet" href="http://necolas.github.com/normalize.css/2.0.1/normalize.css">
   <link rel="stylesheet" href="/threedice-on/css/style2.css">
   <link rel="shortcut icon" href="https://poke-world.net/threedice-on/favicon.ico" />

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
   <script src="js/jquery-scrolltofixed-min.js" type="text/javascript"></script>
   <script type="text/javascript">
       $(document).ready(function() {
             $('.nav').scrollToFixed();
       });
       
$('.menuWrapper').on('click', function(){
  $('.menu').toggleClass('is-active');
});
   </script>
</head>
<body>

  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar top-bar"></span>
          <span class="icon-bar middle-bar"></span>
          <span class="icon-bar bottom-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Hambuger animation</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        
        <ul class="nav navbar-nav navbar-right">
          <li><a href="javascript:void(0)">Item</a></li>
          <li><a href="javascript:void(0)">Item</a></li>
          <li><a href="javascript:void(0)">Item</a></li>
          
        </ul>
      </div>
    </div>
  </nav>

<div class="wrapper">
   <div class="header">
       <?php if($login->is_logged()) : ?>
       <span class="reglog">Ciao <b><?php echo $login->get_username(); ?></b>!&nbsp;&nbsp;<span class="logr"><?php echo $login->get_link_logout(); ?></span></span>
       <?php else: ?>
       <span class="reglog"><p><b><a href="http://poke-world.net/threedice-on/login.php">Accedi</a></b> se hai un Account!</p><p><b><a href="http://poke-world.net/threedice-on/registrazione.php">Registrati</a></b> a 3Dice-on per accedere a tutti i nostri Servizi!</span></p>
       <?php endif; ?>
   </div>
   
   <div class="content">
      <center><span class="title">Home - Download</span></center>
       <br><p>Scarica i Sogni altrui: potrai viverli in prima persona!</p>
       <div class="clearfix">
       <?php
       $sogni = $login->conn->query("SELECT * FROM file_upload ORDER BY id DESC");
       while ($sogno = $sogni->fetch_array()) { ?>
       <div class="sogno"><p><a href="http://poke-world.net/threedice-on/oneiroi/download.php?id=<? echo $sogno['id'] ?>"><img class="imgS" src="http://poke-world.net/threedice-on/oneiroi/<? echo $sogno['url_img'] ?>"><br><? echo $sogno['nome'] ?></a></p></div>
<?php    }
?></div>
   </div>
</div>

</body>
</html> 

perchè? Sad
(11-09-2016, 12:38)Alex2000 Ha scritto: E niente, un secondo dopo che dico risolto arriva un altro problema D:
Ti cito il messaggio che stavo scrivendo all'altro topic senza rifarlo

Citazione:no scheeerzavo lol. Ho altri problemi... senza aprire altri topic.
praticamente ho applicato quel menù, e si vede tutto strano e sgranato a differenza di come dovrebbe essere :/
.clearfix:before,
.clearfix:after{
   content:"";
   display:table
}
.clearfix:after{
   clear:both
}
.clearfix{
   zoom:1
}
table  {
   border-collapse:collapse
}
td, th {
   border:1px solid #ddd;
   padding:8px;
}
@font-face {
 font-family: arial;
 src: url(arial.ttf);
 font-family: 'arial' !important;
}
a {
   color: #0097cf !important;
   transition: all 250ms;
}
a:hover {
   color: #000066 !important;
}
body {
margin: 0;
padding: 0;
background: url("http://i.imgur.com/LEa9lx9.png");    
font-family: 'arial' !important;
}
input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
   background: #0064c7 !important;
   border: none !important;
   padding: 7px 10px !important;
   color: white !important;
   transition: all 500ms;
}
input[type="button" i]:hover, input[type="submit" i]:hover, input[type="reset" i]:hover, input[type="file" i]:hover::-webkit-file-upload-button, button:hover {
   background: #000066 !important;
}
.sogno a {
   text-decoration: none;
   font-weight: bold;
   font-size: 18px;
}
.sogno {
   float: left !important;
   width: 30% !important;
   padding: 5px;
   background: #e2e2e2;
   border: 1px solid transparent;
   text-align: center;
   margin-left: 10px;
   margin-right: 10px;
   margin-top: 10px;
   margin-bottom: 10px;
}
.sogno:hover {
   border: 1px solid #0064c7;
}
.imgS {
   height: 200px !important;
   width: 300px !important;
   text-align: center;
   border: 2px solid #0064c7;
}
.welcome {
   text-align: center;
   background: rgba(0, 100, 199, 0.45);
   font-size: 22px;
   border-radius: 3px;
   padding: 15px;
   color: #000066;
}
.welcome a {
   font-size: 20px;
   font-weight: bold;
   padding: 7px 10px;
   text-decoration: none;
   color: white !important;
   background: #e62117;
   transition: all 250ms;
   border-radius: 4px;
}
.welcome a:hover {
   color: white !important;
   background: #cc181e;
}
.header {
padding: 0;
background: url("http://i.imgur.com/rX4xXh4.png?1");
background-position: center;
height: 200px !important;
}
.header img {
   margin-bottom: 200px !important;
}

.header {
font-weight: bold;
text-align: left;
color: #fff;
}
.buttonT a {
   padding: 5px 8px;
   text-decoration: none;
   color: white !important;
   background: #e62117;
   transition: all 250ms;
   border-radius: 2px;
}
.buttonT a:hover {
   color: white !important;
   background: #cc181e;
}
.title {
   background: #0064c7;
   color: white;
   font-weight: bold;
   padding: 10px;
   padding-left: 100px !important;
   padding-right: 100px !important;
}
.content {
width: 90%;
padding: 20px;
background: white;
border: 2px solid #0064c7;
   box-shadow: 0 0 100px #0064c7;
   margin: auto;
   margin-bottom: 40px;
}

.sticky {
 position: fixed;
 width: 100%;
 left: 0;
 top: 0;
 z-index: 100;
 border-top: 0;
}
.reglog a {
   padding: 5px 8px;
   text-decoration: none;
   color: white !important;
   background: #e62117;
   transition: all 250ms;
   border-radius: 4px;
}
.reglog a:hover {
   color: white !important;
   background: #cc181e;
}
.reglog {
   background: rgba(255,255,255,0.75);
   border: 2px solid #0064c7;
   border-radius: 3px;
   padding: 7px 10px;
   color: #000066;
   margin-top: 15px !important;
   margin-right: 15px;
   float: right !important;
}
.rltable td {
   border: none !important;
}
.rltable tr {
   border: none !important;
}
@media (min-device-width : 320px) and (max-device-width : 480px) {
.sogno {
   float: none !important;
   width: 100% !important;
   padding: 5px;
   background: #e2e2e2;
   border: 1px solid transparent;
   text-align: center;
   margin-left: 0px;
   margin-right: 0px;
   margin-top: 20px;
   margin-bottom: 20px;
}
}

@media (min-device-width : 768px) and (max-device-width : 1024px) {
.sogno {
   float: left !important;
   width: 45% !important;
   padding: 5px;
   background: #e2e2e2;
   border: 1px solid transparent;
   text-align: center;
   margin-left: 10px;
   margin-right: 10px;
   margin-top: 10px;
   margin-bottom: 10px;
}
}
// BOOTSTRAP MENU
.navbar-toggle {
 border: 0;
 padding: 15px;
 margin: 0;
 height: 50px;
 border-radius: 0;
 background: #16a085!important;
}

.icon-bar {
 transition: all .3s;
 background: #fff!important;
 // height: 3px!important;
}

.top-bar {
 // transform-origin: 45%;
 transform: translateY(6px) rotate(45deg);
}

.middle-bar {
 opacity: 0;
 // transform: translateX(-100%);
}

.bottom-bar {
 // transform-origin: 40%;
 transform: translateY(-6px) rotate(-45deg);
}



.navbar-toggle.collapsed {
 .top-bar {
   top: 0;
   transform: rotate(0);
 }
 
 .middle-bar {
   opacity: 1;
   // transform: translateY(0);
 }
 
 .bottom-bar {
   top: 0;
   transform: rotate(0);
 }
}


// CUSTOM MENU
.menuWrapper {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 padding: 20px 10px;
 background: darken(#16a085, 5%);
}

.menu {
 display: block;
 height: 5px;
 background: #fff;
 width: 30px;
 position: relative;
 
 transition: all .3s;
 
 &:before {
   content: "";
   position: absolute;
   top: -10px;
   background: #fff;
   width: 30px;
   height: 5px;
   
   transition: all .3s;
 }
 
 &:after {
   content: "";
   position: absolute;
   top: 10px;
   background: #fff;
   width: 30px;
   height: 5px;
   
   transition: all .3s;

 }
}

.is-active {
 background: transparent;
 
 &:before {
   top: 0;
   transform: rotate(45deg);
 }
 
 &:after {
   top: 0;
   transform: rotate(-45deg);
 }
}

p {
 font-size: 17px;
 color: #fff;
}
<?php
session_start();

require_once('../threedice-on/lib/Users.class.php');
$login = New Users;
?>
<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width" >
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
   <title>3Dice-on</title>
  
   <link rel="stylesheet" href="http://necolas.github.com/normalize.css/2.0.1/normalize.css">
   <link rel="stylesheet" href="/threedice-on/css/style2.css">
   <link rel="shortcut icon" href="https://poke-world.net/threedice-on/favicon.ico" />

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
   <script src="js/jquery-scrolltofixed-min.js" type="text/javascript"></script>
   <script type="text/javascript">
       $(document).ready(function() {
             $('.nav').scrollToFixed();
       });
       
$('.menuWrapper').on('click', function(){
  $('.menu').toggleClass('is-active');
});
   </script>
</head>
<body>

  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar top-bar"></span>
          <span class="icon-bar middle-bar"></span>
          <span class="icon-bar bottom-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Hambuger animation</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        
        <ul class="nav navbar-nav navbar-right">
          <li><a href="javascript:void(0)">Item</a></li>
          <li><a href="javascript:void(0)">Item</a></li>
          <li><a href="javascript:void(0)">Item</a></li>
          
        </ul>
      </div>
    </div>
  </nav>

<div class="wrapper">
   <div class="header">
       <?php if($login->is_logged()) : ?>
       <span class="reglog">Ciao <b><?php echo $login->get_username(); ?></b>!&nbsp;&nbsp;<span class="logr"><?php echo $login->get_link_logout(); ?></span></span>
       <?php else: ?>
       <span class="reglog"><p><b><a href="http://poke-world.net/threedice-on/login.php">Accedi</a></b> se hai un Account!</p><p><b><a href="http://poke-world.net/threedice-on/registrazione.php">Registrati</a></b> a 3Dice-on per accedere a tutti i nostri Servizi!</span></p>
       <?php endif; ?>
   </div>
   
   <div class="content">
      <center><span class="title">Home - Download</span></center>
       <br><p>Scarica i Sogni altrui: potrai viverli in prima persona!</p>
       <div class="clearfix">
       <?php
       $sogni = $login->conn->query("SELECT * FROM file_upload ORDER BY id DESC");
       while ($sogno = $sogni->fetch_array()) { ?>
       <div class="sogno"><p><a href="http://poke-world.net/threedice-on/oneiroi/download.php?id=<? echo $sogno['id'] ?>"><img class="imgS" src="http://poke-world.net/threedice-on/oneiroi/<? echo $sogno['url_img'] ?>"><br><? echo $sogno['nome'] ?></a></p></div>
<?php    }
?></div>
   </div>
</div>

</body>
</html> 

perchè? Sad

Puoi notare gli errore qui > http://poke-world.net/threedice-on/
(Questo messaggio è stato modificato l'ultima volta il: 11-09-2016, 12:40 da Alex2000.)
 

RE: Menu Buggato

11-09-2016, 13:44
#2
Non ha nessuno stile il menu è normale che si veda così
Citazione:Noi non possiamo aiutare tutti, ma tutti possono aiutare qualcuno

 

RE: Menu Buggato

11-09-2016, 17:12
#3
invece si, come puoi vedere alla fine del css ho messo lo stile, preso da codepen

 

RE: Menu Buggato

11-09-2016, 17:18
#4
Quello che hai copiato è SCSS non CSS e poi nel codice di codepen non è presente lo stile per tutto il menu, solo acune cose.
Citazione:Noi non possiamo aiutare tutti, ma tutti possono aiutare qualcuno

 

RE: Menu Buggato

11-09-2016, 17:24
#5
e che differenza c'è? lol intendo tra SCSS e CSS? ora rimedio, ma è per capire

 

RE: Menu Buggato

11-09-2016, 17:25
#6
Cambia un po la sintassi, per convertire da SCSS (SASS) a CSS puoi usare questo tool:
http://www.sassmeister.com/
Citazione:Noi non possiamo aiutare tutti, ma tutti possono aiutare qualcuno

 

RE: Menu Buggato

11-09-2016, 17:34
#7
.clearfix:before,
.clearfix:after{
    content:"";
    display:table
}
.clearfix:after{
    clear:both
}
.clearfix{
    zoom:1
}
table  {
    border-collapse:collapse
}
td, th {
    border:1px solid #ddd;
    padding:8px;
}
@font-face {
  font-family: arial;
  src: url(arial.ttf);
  font-family: 'arial' !important;
}
a {
    color: #0097cf !important;
    transition: all 250ms;
}
a:hover {
    color: #000066 !important;
}
body {
    margin: 0;
    padding: 0;
    background: url("http://i.imgur.com/LEa9lx9.png");    
    font-family: 'arial' !important;
}
input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
    background: #0064c7 !important;
    border: none !important;
    padding: 7px 10px !important;
    color: white !important;
    transition: all 500ms;
}
input[type="button" i]:hover, input[type="submit" i]:hover, input[type="reset" i]:hover, input[type="file" i]:hover::-webkit-file-upload-button, button:hover {
    background: #000066 !important;
}
.sogno a {
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
}
.sogno {
    float: left !important;
    width: 30% !important;
    padding: 5px;
    background: #e2e2e2;
    border: 1px solid transparent;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.sogno:hover {
    border: 1px solid #0064c7;
}
.imgS {
    height: 200px !important;
    width: 300px !important;
    text-align: center;
    border: 2px solid #0064c7;
}
.welcome {
    text-align: center;
    background: rgba(0, 100, 199, 0.45);
    font-size: 22px;
    border-radius: 3px;
    padding: 15px;
    color: #000066;
}
.welcome a {
    font-size: 20px;
    font-weight: bold;
    padding: 7px 10px;
    text-decoration: none;
    color: white !important;
    background: #e62117;
    transition: all 250ms;
    border-radius: 4px;
}
.welcome a:hover {
    color: white !important;
    background: #cc181e;
}
.header {
    padding: 0;
    background: url("http://i.imgur.com/rX4xXh4.png?1");
    background-position: center;
    height: 200px !important;
}
.header img {
    margin-bottom: 200px !important;
}

.header {
    font-weight: bold;
    text-align: left;
    color: #fff;
}
.buttonT a {
    padding: 5px 8px;
    text-decoration: none;
    color: white !important;
    background: #e62117;
    transition: all 250ms;
    border-radius: 2px;
}
.buttonT a:hover {
    color: white !important;
    background: #cc181e;
}
.title {
    background: #0064c7;
    color: white;
    font-weight: bold;
    padding: 10px;
    padding-left: 100px !important;
    padding-right: 100px !important;
}
.content {
    width: 90%;
    padding: 20px;
    background: white;
    border: 2px solid #0064c7;
    box-shadow: 0 0 100px #0064c7;
    margin: auto;
    margin-bottom: 40px;
}

.sticky {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 100;
  border-top: 0;
}
.reglog a {
    padding: 5px 8px;
    text-decoration: none;
    color: white !important;
    background: #e62117;
    transition: all 250ms;
    border-radius: 4px;
}
.reglog a:hover {
    color: white !important;
    background: #cc181e;
}
.reglog {
    background: rgba(255,255,255,0.75);
    border: 2px solid #0064c7;
    border-radius: 3px;
    padding: 7px 10px;
    color: #000066;
    margin-top: 15px !important;
    margin-right: 15px;
    float: right !important;
}
.rltable td {
    border: none !important;
}
.rltable tr {
    border: none !important;
}
@media (min-device-width : 320px) and (max-device-width : 480px) {
.sogno {
    float: none !important;
    width: 100% !important;
    padding: 5px;
    background: #e2e2e2;
    border: 1px solid transparent;
    text-align: center;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 20px;
    margin-bottom: 20px;
}
}

@media (min-device-width : 768px) and (max-device-width : 1024px) {
.sogno {
    float: left !important;
    width: 45% !important;
    padding: 5px;
    background: #e2e2e2;
    border: 1px solid transparent;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}
}
.navbar-toggle {
  border: 0;
  padding: 15px;
  margin: 0;
  height: 50px;
  border-radius: 0;
  background: #16a085 !important;
}

.icon-bar {
  transition: all .3s;
  background: #fff !important;
}

.top-bar {
  transform: translateY(6px) rotate(45deg);
}

.middle-bar {
  opacity: 0;
}

.bottom-bar {
  transform: translateY(-6px) rotate(-45deg);
}

.navbar-toggle.collapsed .top-bar {
  top: 0;
  transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
  opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
  top: 0;
  transform: rotate(0);
}

.menuWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px 10px;
  background: #138a72;
}

.menu {
  display: block;
  height: 5px;
  background: #fff;
  width: 30px;
  position: relative;
  transition: all .3s;
}
.menu:before {
  content: "";
  position: absolute;
  top: -10px;
  background: #fff;
  width: 30px;
  height: 5px;
  transition: all .3s;
}
.menu:after {
  content: "";
  position: absolute;
  top: 10px;
  background: #fff;
  width: 30px;
  height: 5px;
  transition: all .3s;
}

.is-active {
  background: transparent;
}
.is-active:before {
  top: 0;
  transform: rotate(45deg);
}
.is-active:after {
  top: 0;
  transform: rotate(-45deg);
}

p {
  font-size: 17px;
  color: #fff;
}


.navbar {
    background: #000066;
    width: 100%;
    padding: 5px;
    text-decoration: none;
    font-weight: bold;
    color: white;
}
.navbar li {
    float: left;
    margin-right: 5px;
    margin-left: 5px;
    
}
ok grazie. Ho provato a modificare qualcosa, ma comunque il risultato è completamente diverso, da come puoi vedere qui http://codepen.io/savalazic/pen/ezZoWj
ok che il codice non è completo, ma il risultato è troppo diverso!

 

RE: Menu Buggato

11-09-2016, 17:37
#8
Il codice non contiene lo stile del menu, ma solo quello per aprirlo e nasconderlo da mobile
Citazione:Noi non possiamo aiutare tutti, ma tutti possono aiutare qualcuno

[-] I seguenti utenti ringraziano chack1172 per questo messaggio:
  • Alex2000
 

RE: Menu Buggato

11-09-2016, 17:39
#9
ok c'è speranza di trovare online qualche codice più o meno completo? perchè non sono ai livelli di modificare completamente il codice quando non è stato creato da me.

 

RE: Menu Buggato

11-09-2016, 17:43
#10
Potresti provare questo, devi copiare anche il codice js:
https://codepen.io/ibrahimjabbari/pen/lmqLK
Citazione:Noi non possiamo aiutare tutti, ma tutti possono aiutare qualcuno

 
  
Discussione chiusa

Vai al forum:


Utenti in questa pagina: 1 Ospite(i)