<?php
/**
 * Template Name: 100% Width - Menu
 * A full-width template.
 *
 * @package Avada
 * @subpackage Templates
 */

// Do not allow directly accessing this file.
if ( ! defined( 'ABSPATH' ) ) {
	exit( 'Direct script access denied.' );
}
?>
<?php get_header(); ?>


<section id="content" class="full-width">
    <div class="img_top_menu"></div>

    <div id="blocco_centrale">

    <!--Inicio Repeater Categoria-->
    <?php if(have_rows('categoria' , 'option')): while(have_rows('categoria' , 'option')) : the_row(); ?>

        <div class="blocco_menu">

            <!-- Grupo Título  -->
            <?php if(have_rows('gruppo_titolo')): while(have_rows('gruppo_titolo')) : the_row(); ?>
            <div class="blocco_titolo">            
                <div class="titolo_categoria">
                    <h2><?php the_sub_field('titolo_categoria'); ?></h2>
                    <h3><?php the_sub_field('sub_titolo_categoria'); ?></h3>
                </div>
                <img src="<?php the_sub_field('img_categoria'); ?>"  alt="">
            </div>
            <div class="blocco_lista">

                <!-- Início repeater produtos  -->
                <?php if(have_rows('items_categoria' , 'option')): while(have_rows('items_categoria' , 'option')) : the_row(); ?>
                    <h2><?php the_sub_field('nome_item'); ?> · €<?php the_sub_field('prezzo_item'); ?></h2><sup><?php the_sub_field('allerg_item'); ?></sup>
                    <p><?php the_sub_field('descrizione_item'); ?></p>
                <?php endwhile; else : endif; ?>
                <!-- Final repeater produtos  -->

            <?php endwhile; else : endif; ?>
            <!-- Final Grupo Título  -->

            </div>
        </div>

    <?php endwhile; else : endif; ?>
    <!-- Final Repeater Categoria  -->

    </div>
</section>

<?php get_footer(); ?>
#main{
  padding-right: 0!important;
padding-left: 0!important;
}
.fusion-row{
max-width: inherit!important;
}
.img_top_menu{
width: 100%;
height: 500px;
background-image: url('http://streetburguerferrara.local/wp-content/uploads/2020/09/BANNER_TOP-e1601384845664.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin-bottom: 50px
}



#blocco_centrale{
width: 1024px;
background-color: #000;
margin: auto;
}


#blocco_centrale:after {
  content: '';
  display: block;
  clear: both;
}

.blocco_menu{
  width: 500px;
  margin: 0 6px 15px;
  position: relative;
  float: left;
}
#blocco_centrale .blocco_menu .blocco_titolo{
overflow: hidden;
width: 100%;
background-color: #fff;
text-align: center;
}
#blocco_centrale .blocco_menu .blocco_titolo h2{
text-transform: uppercase;
font-family: "Din Condensed Bold"!important;
font-size: 40px;
color: #000;
margin: 0;
padding-top: 20px;
}
#blocco_centrale .blocco_menu .blocco_titolo h3{
text-transform: uppercase;
font-family: "Din Condensed Bold"!important;
font-size: 20px;
line-height: 10px;
color: #000;
margin: 0;
}
#blocco_centrale .blocco_menu .blocco_titolo img{
display: block;
float: left;
width: 20%;
padding: 20px;
}

#blocco_centrale .blocco_menu .blocco_titolo .titolo_categoria{
width: 75%;
float: left;
}
#blocco_centrale .blocco_menu .blocco_lista {
overflow: hidden;
border: #fff solid;
border-width: 0px 5px 5px 5px;
padding: 15px;
}
#blocco_centrale .blocco_menu .blocco_lista h2 {
text-transform: uppercase;
font-family: "Din Condensed Bold"!important;
font-size: 30px;
color: #fff;
margin: 0;
display: inline-block;
}
#blocco_centrale .blocco_menu .blocco_lista sup{
font-family: "Din Condensed Bold"!important;
font-size: 15px;
color: #fff;
margin: 0;
padding-left: 5px;
}
#blocco_centrale .blocco_menu .blocco_lista p{
font-family: "helvetica neue";
font-size: 20px;
color: #fff;
margin: 0;
line-height:20px
}
$('#blocco_centrale').isotope({
        itemSelector: '.blocco_menu',
        layoutMode: 'masonry',
    });
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js