Mini Shell

<style type="text/css">
    .logo-mobile{width: 100%; max-width: 150px}
    .navbar-default{background-color: #fff; padding:8px 10px; border: none;}
    .navbar-default li a{text-transform: uppercase; font-weight: 700; font-size: 13px; color: #101010 !important;}
    .navbar-default li:hover a{color: <?php echo $row_cores['cor_1'] ?>;}
    .segura-menu-fixed{display: flex; justify-content: space-between; align-items: center;}

    #header2{display: none; position: fixed; background-color: #fff; top:0; left: 0; width: 100%; z-index: 999;}
    #header2 .menu{float: right;}
    @media(max-width: 767px){
        /* .logo-mobile{height:35px; margin-top: 0px; float: left} */
        .navbar-default .navbar-toggle{margin: 10px}
        #header2 .menu{float: none; margin-top: 10px;}
        .navbar-default li a{text-transform: uppercase; font-weight: 700; font-size: 18px; color: #101010 !important; margin-top: 10px}
        .navbar-header{display: flex; justify-content: space-between; width: 100%; flex-direction: row-reverse; align-items: center;}
        .navbar-header::before, .navbar-header::after{display: none;}
        .segura-menu-fixed{display: inherit;}
    }

    #header-mobile{border-top: solid 6px <?php echo $cor1 ?>;}
    #header-mobile .menu{margin-top: 10px; float: none; }
    #header-mobile .logo{max-width: 230px;}
    .current a { color:<?php echo $row_cores['cor_1'] ?> !important;font-weight:bold !important}
    .navbar{display: block !important}
    .navbar .container, .navbar .container-fluid, .navbar .container-lg, .navbar .container-md, .navbar .container-sm, .navbar .container-xl {display: block !important}
    #header2 .atendimento{color: #fff !important; border-radius: 20px; background: linear-gradient(327deg, rgba(23,120,183,1) 0%, rgba(18,161,154,1) 100%); padding:10px 15px !important;}
    #header-mobile .atendimento{color: #fff !important; border-radius: 20px; background: linear-gradient(327deg, rgba(23,120,183,1) 0%, rgba(18,161,154,1) 100%); padding:10px 15px !important;}


    #header2 .button img{max-width: 200px !important; border: solid 1px #101010; padding: 15px; border-radius: 100px}
    #header-mobile .button img{max-width: 200px !important; border: solid 1px #101010; padding: 15px; border-radius: 100px}


</style>


<div class="shadow visible-xs" id="header2">
    <!-- Navigation -->
    <nav class="navbar navbar-default" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="segura-menu-fixed">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="<?php echo RAIZ ?>">
                        <img src="<?php echo RAIZ_UP. $row_configuracoes['configuracoes_logo'] ?>" class="img-responsive logo-mobile">
                    </a>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse menu" id="bs-example-navbar-collapse-2">
                    <?php 
                    $query = "SELECT paginas_id, paginas_titulo, paginas_url FROM paginas WHERE paginas_menu = 1 ORDER BY paginas_ordem_menu ASC";
                    $paginas = mysqli_query($config, $query) or die(mysqli_error());
                    ?>
                    <ul class="nav navbar-nav">
                        <?php include('templates/func/menu.php'); ?>
                        <li>
                            <a class="button hvr-bob transition" href="https://www.eventos365.com.br/Event/Detail/30008" target="_blank">
                                <img src="<?php echo RAIZ ?>img/button.jpg">
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>
</div>  

<div id="header-mobile" class="visible-xs visible-sm">
    <!-- Navigation -->
    <nav class="navbar navbar-default" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="<?php echo RAIZ ?>">
                    <img src="<?php echo RAIZ_UP . $row_configuracoes['configuracoes_logo'] ?>" class="img-fluid logo-mobile">
                </a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse menu" id="bs-example-navbar-collapse-1">
                <?php 
                $query = "SELECT paginas_id, paginas_titulo, paginas_url FROM paginas WHERE paginas_menu = 1 ORDER BY paginas_ordem_menu ASC";
                $paginas = mysqli_query($config, $query) or die(mysqli_error());
                ?>
                <ul class="nav navbar-nav">
                    <?php include('templates/func/menu.php'); ?>
                    <li>
                        <a class="button hvr-bob transition" href="https://www.eventos365.com.br/Event/Detail/30008" target="_blank">
                            <img src="<?php echo RAIZ ?>img/button.jpg">
                        </a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        <!-- /.container -->
    </nav>
</div>