Verified Commit 5c65ab14 authored by Jakob Moser's avatar Jakob Moser
Browse files

Make navigation bar take all the width it can (closes #18)

parent c98c6c69

header.php

+2 −0
Original line number Diff line number Diff line
@@ -50,9 +50,11 @@ get_header(); 
    </head>

    <body class="<?php echo is_admin_bar_showing() ? 'has-admin-bar' : '';?>">

        <header>

            <div>

                <a class="logo" href="<?php echo home_url();?>"></a>

                <a class="nav-toggle" href="#nav">Menü</a>

                <nav id="nav">

                    <?php wp_nav_menu(array('container'=>'false')); ?>

                </nav>

            </div>

        </header>

style.css

+17 −2
Original line number Diff line number Diff line
@@ -7,7 +7,7 @@ 
 * Author: personads :: Maximilian Müller-Eberstein (ursprüngliche Version und Design); Jakob Moser

 * Author URI: https://personads.me/

 *

 * Version: 2.12.0

 * Version: 2.13.0

 * Requires PHP: 8.0

 *

 * License: GNU General Public License v3.0
@@ -139,6 +139,17 @@ body > header::after { 
    z-index: -1;

}



body > header > div {

    /* The navbar in the header should take up the entire remaining width of the screen (solved with the display: grid and the 1fr).

       The problem: body > header also importantly contains ::before and ::after styles to render the speech bubble (triangles).

       If we set body > header to display: grid, the ::before and ::after styles break. So we introduced an additional wrapper div,

       which has the style. */

    display: grid;

    grid-auto-flow: column;

    align-items: end;

    grid-template-columns: max-content 1fr;

}



body > header .logo {

    display: inline-block;

    max-width: 350px;
@@ -149,7 +160,7 @@ body > header .logo { 
    background-color: #000;

    width: 248px;

    height: 77px;

    margin: 8px 0px -5px 10px;

    margin: 8px 0 0 10px;

    transition: background-color 0.3s;

    border: none;

}
@@ -273,6 +284,10 @@ header nav li:hover > ul { 
        display: block;

    }



    body > header > div {

        display: block;

    }



    header .nav-toggle {

        display: block;

        padding: 0 15px;