Tips for enabling a flexbox item to extend beyond its container

While attempting to utilize flexbox for creating a navbar with the logo in the center, I encountered an issue where the logo wasn't able to overflow from above and below the navbar.

I experimented with squeezing in and positioning the element, but it seemed like a suboptimal solution that would complicate coding responsiveness.

HTML

<template>
  <v-toolbar class="nav_container" color="#000000" flat height="80px">
    <v-toolbar-items class="nav-items-left">
      <NuxtLink class="home-link" to="/">Home</NuxtLink>
      <NuxtLink class="nomination-link" to="/">Nomination</NuxtLink>
      <NuxtLink class="prev-link" to="/">Previous Rounds</NuxtLink>
    </v-toolbar-items>
    <div class="logo-container">
      <img src="../static/award-logo.svg" alt="John" class="logo" />
    </div>
    <v-toolbar-items class="nav-items-right">
      <NuxtLink class="media-link" to="/">Media Center</NuxtLink>
      <NuxtLink class="about-link" to="/">About</NuxtLink>
      <NuxtLink class="contactus-link" to="/">Contact Us</NuxtLink>
    </v-toolbar-items>
  </v-toolbar>
</template>

scss:

.nav_container {
  width: 100%;
  position: relative;

  .nav-items-left {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;

    .home-link {
      color: #ba9d29;
      text-decoration: none;
      font-size: 20px;
      &:hover {
        transform: scale(1.2);
      }
    }

    .nomination-link {
      color: #ba9d29;
      text-decoration: none;
      font-size: 20px;
      &:hover {
        transform: scale(1.2);
      }
    }
    .prev-link {
      color: #ba9d29;
      text-decoration: none;
      font-size: 20px;
      &:hover {
        transform: scale(1.2);
      }
    }
  }

  .nav-items-right {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;

    .about-link {
      color: #ba9d29;
      text-decoration: none;
      font-size: 20px;
      &:hover {
        transform: scale(1.2);
      }
    }
    .media-link {
      color: #ba9d29;
      text-decoration: none;
      font-size: 20px;
      &:hover {
        transform: scale(1.2);
      }
    }
    .contactus-link {
      color: #ba9d29;
      text-decoration: none;
      font-size: 20px;
      &:hover {
        transform: scale(1.2);
      }
    }
  }

  .logo-container {
    position: absolute;
    height: 200px;
    width: 200px;
    left: 43.5%;

    .logo {
      &:hover {
        transform: scale(1.2);
      }
    }
  }
}

Could you suggest a better approach to achieve this? Here's an image illustrating what I'm trying to accomplish: https://i.stack.imgur.com/hmGaA.jpg

Code after fixing by @LMichiels

HTML

<template>
  <v-toolbar class="nav_container" color="#000000" flat height="80px">
    <v-toolbar-items class="nav-items">
      <NuxtLink class="home-link" to="/">Home</NuxtLink>
      <NuxtLink class="nomination-link" to="/">Nomination</NuxtLink>
      <NuxtLink class="prev-link" to="/">Previous Rounds</NuxtLink>

      <img
        src="../static/award-logo.svg"
        alt="John"
        class="logo"
        height="200px"
      />

      <NuxtLink class="media-link" to="/">Media Center</NuxtLink>
      <NuxtLink class="about-link" to="/">About</NuxtLink>
      <NuxtLink class="contactus-link" to="/">Contact Us</NuxtLink>
    </v-toolbar-items>
  </v-toolbar>
</template>

SCSS

.nav_container {
  width: 100%;
  position: relative;
  height: 125px;

  .nav-items {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: 0;

    .home-link {
      color: #ba9d29;
      text-decoration: none;
      font-size: 20px;
      &:hover {
        transform: scale(1.2);
      }
    }

    .nomination-link {
      color: #ba9d29;
      text-decoration: none;
      font-size: 20px;
      &:hover {
        transform: scale(1.2);
      }
    }
    .prev-link {
      color: #ba9d29;
      text-decoration: none;
      font-size: 20px;
      &:hover {
        transform: scale(1.2);
      }
    }

    .about-link,
    .media-link,
    .contactus-link,
    .logo {
      color: #ba9d29;
      text-decoration: none;
      font-size: 20px;
      &:hover {
        transform: scale(1.2);
      }
    }
  }
}
htmlcsssassvuetify.js

Answer №1

Here's a simple solution: adjust the container height to 0 and center-align everything.

I've streamlined your code for better understanding:

HTML:

<div class="nav_container" flat >
<div class="nav-items-left">
  <a class="home-link" to="/">Home</a>
  <a class="nomination-link" to="/">Nomination</a>
  <a class="prev-link" to="/">Previous Rounds</a>
  <img src="https://www.pngitem.com/pimgs/m/74-749225_host-circle-hd-png-download.png"class="demo-img-placeholder"> </img>
  <a class="prev-link" to="/">Previous Rounds</a>
  <a class="prev-link" to="/">Previous Rounds</a>
  <a class="prev-link" to="/">Previous Rounds</a>

SCSS:

.nav_container {
width: 100%;
background: black;
margin-top: 200px;
height: 125px;
display: flex;
align-items: center;

.nav-items-left {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: 0;
    background: yellow;
    border: 1px solid red;

    a {
        background: blue;
    }

    .home-link {
        color: #ba9d29;
        text-decoration: none;
        font-size: 20px;

        &:hover {
            transform: scale(1.2);
        }
    }

    .demo-img-placeholder {
        height: 50vh;
        width: 50vh;
        background: red;
    }

    .nomination-link {
        color: #ba9d29;
        text-decoration: none;
        font-size: 20px;

        &:hover {
            transform: scale(1.2);
        }
    }

    ...

.logo-container {
    position: absolute;
    height: 200px;
    width: 200px;
    left: 43.5%;

    .logo {
        &:hover {
            transform: scale(1.2);
        }
    }
}

}

View the full pen here: https://codepen.io/Sabshane/pen/VwxajKV

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Resizable vector graphics with consistent border dimensions

I need a solution that maintains a constant line width while still making the SVG responsive. Here is the desired outcome: https://codepen.io/dudleystorey/pen/wMLBLK The example linked above achieves this using CSS, but I am looking to achieve the same r ...

htmlcsssvgresponsive

I keep encountering an issue with getJson

A snippet of my JavaScript code retrieves a JSON object from a URL. Here is the portion of the code in question: <script> $(document).ready(function(){ $("button").click(function(){ $.getJSON('url_address', {}, function(data) { ...

javascriptjqueryhtmljson

Is it better to apply the font-family to the body or to the html element?

Is it more appropriate to specify the font-family CSS property on the html element or the body element? html { font-family: sans-serif; } or body { font-family: sans-serif; } I've looked into this issue online, but there doesn't seem to ...

htmlcss

Starting a div programmatically and then running into trouble when trying to close it, an error was encountered with an end tag for "div" without a corresponding start tag

I am looking to create the following HTML structure: <div id="my-grid" class="isotope"> <div class="myProject-item">....</div> <div class="myProject-item">....</div> <div class="myProject-item">....</div> ...

jqueryhtmlcssasp.net-mvcrazor

Tips for combining values with Reactive Forms

Is there a way to merge two values into a single label using Reactive Forms without utilizing ngModel binding? <label id="identificationCode" name="identificationCode" formControlName="lb ...

javascripthtmlangulartypescript

Asynchronously updating a Django model instance in real-time

On my website, there is a button that allows users to view notifications as a drop-down without navigating away from the current page. I am interested in updating the unread field of every notification for a user from True to False when this button is clic ...

pythonhtmldjangoasynchronouscelery

What is the best way to enable horizontal scrolling for textarea overflow in a smooth manner like input, without any sudden jumps?

Currently, I am interested in utilizing a one-line textarea (with rows=1 and overflow-x:hidden;) similar to input type="text. However, I have encountered an issue where the content scrolls with "jumps" while typing inside it: https://i.stack.imgur.com/Rzf ...

javascripthtmlcsstextareaoverflow

Using jQuery to target nested HTML elements is a great way to efficiently manipulate

Within the code below, I have a complex HTML structure that is simplified: <div id="firstdiv" class="container"> <ul> <li id="4"> <a title="ID:4">Tree</a> <ul> <li id="005"> ...

javascriptjqueryhtml

What is the CSS method for styling a color label on an active input box?

I am trying to achieve a specific effect where the label changes color when the input box is in focus. However, my current CSS code does not seem to be working as expected. Can someone please explain why and provide a solution to fix this issue? .test-l ...

htmlcss

Auto play feature malfunctioning in Onsen-UI Carousel attribute settings

When utilizing onsen UI in my mobile web application, I encountered an issue with the autoplay property not functioning properly within the carousel. <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button on ...

javascripthtmlcssonsen-ui

Looking for help with aligning an icon to the right side of my text

I'm struggling with aligning the icon to the right of the quantity. When I use float:right, it places the icon at the far right of the cell instead of next to the text. Is there a way to get it to be on the right side of the text but directly adjacent ...

htmlcssangularjsangular

Utilizing Adjacent Sibling Selectors within the context of a specific enclosing class

I have a question regarding the following HTML structure: <div class="a"> <div class="b"></div> <div class="c"></div> </div> My goal is to apply a specific CSS rule only within the a class: .b + .c { margin-le ...

csscss-selectors

Organizing Pictures in a Gridded Design

My dilemma lies in displaying a set of thumbnail images within a div. The width of the div can vary depending on the screen size. Each image is fixed at 150px * 150px with a padding of 5px. I aim to arrange these thumbnails in a grid layout while ensuring ...

jqueryhtmlcss

Do you know of a more streamlined approach to formatting this SCSS code?

Currently working on a Saleor Site and diving into the world of Django and SASS for the first time. While crafting my own styling rules in SCSS files, I've noticed some repetitive code that could potentially be streamlined. It seems like there should ...

cssdjangosass

Incorporate a smooth infinite scroll feature in a CSS carousel that seamlessly loops without

Looking for a solution to the carousel jerk issue when it reaches the end of the loop? Is there a way to seamlessly loop start without any noticeable interruptions? Here is the code in question. Avoiding the use of JavaScript, is there a method to achieve ...

htmlcsscss-transitions

Capture a screenshot of the icons

I'm curious about displaying specific parts of images in a React Native application. class InstaClone extends Component { render() { return( <View style={{ flex:1, width:100 + "%", height:100 + "%" }}> <View style={st ...

javascriptcssreactjsreact-native

What is the best way to include an image link in an HTML page generated with golang?

I am a beginner in Go and web apps, and I am working on creating an app that retrieves menu items from a database and sends the item description along with a related picture link through an HTML page for a browser. The app will be running on a local networ ...

htmlimagegosrc

Adjust the background color of the dropdown menu

I'm struggling to change the background color of the property address picker dropdown from transparent to white. I've been trying different things but can't seem to get it right. Any suggestions? Additionally, I want to change the cursor to ...

jqueryformscss

Exploring the ins and outs of utilizing pseudo selectors with material-ui

I've been attempting to accomplish a simple task. I wanted to toggle the visibility of my <TreeMenu/> component in material UI v1 using pseudo selectors, but for some reason it's not working. Here is the code: CSS: root: { ba ...

cssreactjsmaterial-ui

Fixed-positioned elements

I'm facing a small issue with HTML5 that I can't seem to figure out. Currently, I have a header image followed by a menu div containing a nav element directly below it. My goal is to make the menu div stay fixed when scrolling down while keeping ...

javascriptjquerycsshtml