Support » CSS / opmaak vragen » Container neemt te veel breedte

  • matsgemmeke

    (@matsgemmeke)


    Voor een bootstrap navigatiebalk gebruik ik een afbeelding als navbar-brand. Deze afbeelding heb ik een width van 50% gegeven, maar op de website pakt de container nog steeds de volledige breedte van de gehele afbeelding. Hierdoor schuift de rest van de navigatie te snel onder de afbeelding. Hoe kan ik dit oplossen?

    De HTML van de navigatie:

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a href="#" class="navbar-brand">
            <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/logo.png">
        </a>
        <button type="button" class="navbar-toggler navbar-toggler-right" data-toggle="collapse" data-target="#navbar-menu">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbar-menu">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a href="/home" class="nav-link">Home</a>
                </li>
                <li class="nav-item">
                    <a href="/blog" class="nav-link">Blog</a>
                </li>
            </ul>
        </div>
    </nav>

    En de CSS:

    .navbar {
        min-height: 250px;
    }
    
    .navbar-brand img {
        width: 50%;
    }

    De pagina waar ik hulp bij nodig heb: [log in om de link te zien]

1 reactie aan het bekijken (van in totaal 1)
  • Guido

    (@guido07111975)

    Hallo,

    De container waar het logo in staat (de a tag met class navbar-brand) blijft dezelfde breedte houden als je de img verkleind. Deze breedte wordt bepaald door de navigatie aan de rechterkant. Vrij complexe CSS. Heeft je thema geen instelling om dit te wijzigen?

    Guido

1 reactie aan het bekijken (van in totaal 1)