I'm trying to stretch out the contents of my navigation bar to fill the width of the bar, so I'm using Flexbox. There seems to be a problem because the form within the navigation bar is set to a certain height that stretches the other two flex items that are its siblings.
Here is my markup:
<?php
// Define HTML structure of the Header Menu
$args = array (
'theme_location' => 'header-menu',
'menu_class' => 'nav-list',
'menu_id' => null,
'container' => 'nav',
'link_before' => '<h2>',
'link_after' => '</h2>'
);
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<title><?php bloginfo('name'); ?> » <?php is_front_page() ? bloginfo('description') : wp_title(''); ?></title>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="navigation" class="wrapper">
<header>
<h1>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.11 122.11">
<defs><style>.moon{stroke:#000;stroke-miterlimit:10;}</style></defs>
<path class="moon" d="m96.69,15.5c-1.03-.81-2.47-.85-3.55-.1-1.08.75-1.55,2.1-1.16,3.36,2.9,9.36,3.35,19.38,1.3,28.99-6.62,31.04-37.25,50.9-68.29,44.28-1.58-.34-3.21-.76-4.97-1.3-1.25-.38-2.61.09-3.35,1.16-.74,1.08-.7,2.51.1,3.55,8.22,10.55,19.94,17.9,33.02,20.69,3.99.85,7.97,1.26,11.9,1.26,26.29,0,49.98-18.35,55.68-45.07,4.59-21.5-3.34-43.27-20.68-56.81Z"/>
<path class="star"d="m65.33,15.55c-.2-.62-.78-1.04-1.43-1.04h-10.86l-3.36-10.33c-.2-.62-.78-1.04-1.43-1.04s-1.23.42-1.43,1.04l-3.36,10.33h-10.86c-.65,0-1.23.42-1.43,1.04-.2.62.02,1.29.54,1.68l8.79,6.38-3.36,10.33c-.2.62.02,1.29.54,1.68.26.19.57.29.88.29s.62-.1.88-.29l8.79-6.38,8.79,6.38c.53.38,1.24.38,1.76,0,.53-.38.75-1.06.54-1.68l-3.36-10.33,8.79-6.38c.53-.38.75-1.06.54-1.68Z"/>
<path class="star" d="m28.02,38.34h-7.94l-2.45-7.55c-.2-.62-.78-1.04-1.43-1.04s-1.23.42-1.43,1.04l-2.45,7.55h-7.94c-.65,0-1.23.42-1.43,1.04-.2.62.02,1.29.54,1.68l6.42,4.67-2.45,7.55c-.2.62.02,1.29.54,1.68.53.38,1.24.38,1.76,0l6.42-4.67,6.42,4.67c.26.19.57.29.88.29s.62-.1.88-.29c.53-.38.75-1.06.54-1.68l-2.45-7.55,6.42-4.67c.53-.38.75-1.06.54-1.68-.2-.62-.78-1.04-1.43-1.04Z"/>
</svg>
<b class="invisible"><?php bloginfo('name'); ?></b>
</a>
</h1>
</header>
<form id="search" action="<?php echo esc_url( home_url( '/' ) ); ?>" method="get">
<input type="search" class="input-text" name="s" placeholder="Search a neighborhood or city" autocomplete="off">
</form>
<?php if ( has_nav_menu( 'header-menu' ) ) : wp_nav_menu( $args ); endif; ?>
</div>
I'm using Compass's Flexbox module and I have a mixin for media queries. Here's all the related CSS to the navigation bar:
// Define all navigation bar related styles here
#navigation {
padding-top: $space-horizontal;
padding-bottom: $space-horizontal;
@include flexbox((
display: flex,
flex-direction: row
));
position: relative;
> header {
width: 24px;
padding-right: $space-horizontal * 0.5;
h1 > a {
padding-bottom: 0;
overflow: hidden;
> #logo {
width: 24px;
height: 24px;
&:hover,
&:active {
.moon {
fill: #FFF;
transition: fill 0.1s ease-in;
}
.star {
fill: #FFDD5C;
transition: fill 0.1s ease-in;
}
}
}
}
}
a {
color: $color-foreground;
&:hover,
&:active {
padding-bottom: 0;
border-bottom: 0;
}
}
// Menu
> .menu-header-menu-container {
padding-left: $space-horizontal * 0.5;
@include flex(1);
> .nav-list {
margin-top: $default-heading-size + 2 * $space-horizontal;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
@include respond-above(sm) {
margin-top: 0;
position: static;
@include flexbox((
display: flex,
flex-direction: row,
));
> .menu-item {
padding-right: $space-horizontal * 0.5;
padding-left: $space-horizontal * 0.5;
@include flex(1);
a {
display: block;
}
}
}
}
}
// Search
> #search {
padding-right: $space-horizontal * 0.5;
padding-left: $space-horizontal * 0.5;
display: none;
@include flex(3);
@include respond-above(sm) {
display: block;
}
> .input-text {
width: 100%;
font-size: $default-heading-size;
color: $color-foreground;
padding-top: 0;
padding-bottom: 0;
border: 0;
}
}
}
Here's a screenshot of the problem:
I've tried using display: inline-block but that doesn't fill out the container the way I want them to. I've tried double-checking all the styles, and none of them have a specified height. When I delete the form using Chrome's DevTool, the height of its siblings go back to normal. I'm sure it's the form. It only appeared when I added that element to the markup. I don't know what it is. Even ChatGPT can't diagnose the problem properly.
I was able to fix it when I moved on to styling other elements. The problem wasn't in the form. I probably just didn't notice the problem was there before the form because the items were aligned. The problem was with the overflow on the
<header>. The anchor tag had an overflowing invisible<h1>element that was causing the height to overflow off the navigation bar. When I set thedisplayproperty of the anchor tag toblockand set a proper height for it the overflow was fixed.