CSS problema con flexbox tema wordpress sass/php

Bynary01 · 7 Settembre 2020

salve ragazzi, sto cercando di creare una navbar nel mio tema wordpress sviluppato in php, e sass, il quesito è questo:
ho un header che contiene una div di classe logo-container e una nav che al suo interno ha una ul con i rispettivi li;
adesso, quando do la proprietà flex 1 alla ul e flex 2 al logo, lo spazio conferito al logo rimane sempre maggiore di quello conferito alla ul rendendomi impossibile spaziare i singoli li attraverso justify-content: space-around, anche invertendo la proprietà flex il risultato rimane lo stesso.
incollo il codice

HTML:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>

    <meta name='robots' content='noindex,nofollow' />
<link rel='dns-prefetch' href='//s.w.org' />
        <script type="text/javascript">
            window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.0.0\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/13.0.0\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/localhost:8080\/wordpress\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.5.1"}};
            !function(e,a,t){var r,n,o,i,p=a.createElement("canvas"),s=p.getContext&&p.getContext("2d");function c(e,t){var a=String.fromCharCode;s.clearRect(0,0,p.width,p.height),s.fillText(a.apply(this,e),0,0);var r=p.toDataURL();return s.clearRect(0,0,p.width,p.height),s.fillText(a.apply(this,t),0,0),r===p.toDataURL()}function l(e){if(!s||!s.fillText)return!1;switch(s.textBaseline="top",s.font="600 32px Arial",e){case"flag":return!c([127987,65039,8205,9895,65039],[127987,65039,8203,9895,65039])&&(!c([55356,56826,55356,56819],[55356,56826,8203,55356,56819])&&!c([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]));case"emoji":return!c([55357,56424,8205,55356,57212],[55357,56424,8203,55356,57212])}return!1}function d(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(i=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},o=0;o<i.length;o++)t.supports[i[o]]=l(i[o]),t.supports.everything=t.supports.everything&&t.supports[i[o]],"flag"!==i[o]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[i[o]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady=!1,t.readyCallback=function(){t.DOMReady=!0},t.supports.everything||(n=function(){t.readyCallback()},a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function(){"complete"===a.readyState&&t.readyCallback()})),(r=t.source||{}).concatemoji?d(r.concatemoji):r.wpemoji&&r.twemoji&&(d(r.twemoji),d(r.wpemoji)))}(window,document,window._wpemojiSettings);
        </script>
        <style type="text/css">
img.wp-smiley,
img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 .07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}
</style>
    <link rel='stylesheet' id='dashicons-css'  href='http://localhost:8080/wordpress/wp-includes/css/dashicons.min.css?ver=5.5.1' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css'  href='http://localhost:8080/wordpress/wp-includes/css/admin-bar.min.css?ver=5.5.1' type='text/css' media='all' />
<link rel='stylesheet' id='wp-block-library-css'  href='http://localhost:8080/wordpress/wp-includes/css/dist/block-library/style.min.css?ver=5.5.1' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-css-css'  href='http://localhost:8080/wordpress/wp-content/themes/mytheme/css/bootstrap.min.css?ver=5.5.1' type='text/css' media='all' />
<link rel='stylesheet' id='stylesheet-css'  href='http://localhost:8080/wordpress/wp-content/themes/mytheme/style.css?ver=5.5.1' type='text/css' media='all' />
<link rel='stylesheet' id='app.css-css'  href='http://localhost:8080/wordpress/wp-content/themes/mytheme/dist/app.css?ver=5.5.1' type='text/css' media='all' />
<script type='text/javascript' src='http://localhost:8080/wordpress/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp' id='jquery-core-js'></script>
<link rel="https://api.w.org/" href="http://localhost:8080/wordpress/index.php?rest_route=/" /><link rel="alternate" type="application/json" href="http://localhost:8080/wordpress/index.php?rest_route=/wp/v2/pages/37" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost:8080/wordpress/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost:8080/wordpress/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 5.5.1" />
<link rel="canonical" href="http://localhost:8080/wordpress/" />
<link rel='shortlink' href='http://localhost:8080/wordpress/' />
<link rel="alternate" type="application/json+oembed" href="http://localhost:8080/wordpress/index.php?rest_route=%2Foembed%2F1.0%2Fembed&#038;url=http%3A%2F%2Flocalhost%3A8080%2Fwordpress%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://localhost:8080/wordpress/index.php?rest_route=%2Foembed%2F1.0%2Fembed&#038;url=http%3A%2F%2Flocalhost%3A8080%2Fwordpress%2F&#038;format=xml" />
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
      </head>
  <body >

    <header>

      <div class="logo-container">

      <h4>Zetta Hotels</h4>
    </div>

      <nav>

      <ul id="menu-primary-menu" class="nav-ul"><li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-17"><a href="http://localhost:8080/wordpress/" aria-current="page">Home</a></li>
<li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19"><a href="#">Rooms</a></li>
<li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20"><a href="#">Restaurant</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-21"><a href="#">About Us</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22"><a href="#">Blog</a></li>
<li id="menu-item-23" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-23"><a href="#">Contact</a></li>
</ul>    </nav>

  </header>


   
  </body>
</html>

Sass:

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

header{
  display: flex;
  align-items: center;
  height: 10vh;
  width: 90%;
  margin: auto;
  justify-content: space-around;

  .logo-container{
    display: flex;
    flex: 2;

    h4{
      margin:0;
    }

  }

  .nav-ul{
    display: flex;
    list-style: none;
    margin: 0;
    flex: 1
  }
}

Cerca

CSS problema con flexbox tema wordpress sass/php

Bynary01

DISCUSSIONI SIMILI