After clicking the searchbar white space which should appear on the navbar.
However, it appears in the wrong place when using Chrome:
It looks properly on Firefox: (but then layout of site is looking weird, not like intended)
Here is my attempt so far:
<!-- Navbar.vue -->
<template>
<nav class="light-blue lighten-1" role="navigation">
<div class="nav-wrapper">
<div class="row">
<!-- Logo on the left -->
<div class="col m2">
<a href="#" class="brand-logo">TabletopHaven</a>
</div>
<!-- Search bar in the center -->
<div class="col m7">
<form>
<div class="input-field center-align">
<input id="search" type="search" required>
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</div>
<!-- Login button on the right -->
<div class="col m3 right-align">
<a class="waves-effect waves-light btn">Register/Login</a>
</div>
</div>
</div>
</nav>
</template>
<script>
export default {
name: 'MainNavbar',
}
</script>
<style scoped>
.nav-wrapper {
padding-left: 10px;
padding-right: 10px;
width:100%;
}
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
</style>
Here is fiddle code so you can check it (it looks a little different): https://jsfiddle.net/Lxbwv5yq/
I found out how to solve this.
Basically you need to change the height of searchbar because it is too big and it's overlapping to other containers