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

Display modal after drop-down selection, triggered by API response

Currently, I am working on integrating an API to enable users to make payments through a modal. Users should be able to enter an amount and select a payment frequency. I have successfully extracted various payment frequencies from the API response and pop ...

javascriptjqueryhtmlapivue.js

Mastering the art of horizontal alignment for button and ul elements

I aim to create a unique layout that appears as follows: [the button][world1][world2] The code provided is in HTML format: <div id='container'> <button id='my-button'>the button</button> <ul id='my-ul&a ...

css

What is the best way to adjust a component to display varying content based on the scenario?

I am looking for a way to reuse a component on my website that displays messages. The challenge is that in one section, the content consists of only a title and paragraph, while in another section, there are multiple titles and content pieces. I have imple ...

htmlcssvue.js

What is the process of compiling HTML code?

In controller, I bind the same data like $scope.name = "<div>geetha teko</div>", this name will now be bound to the HTML like {{name}}. When I view it in the browser, it prints as "<div>geetha tek0</div>". Is there a way to only di ...

javascripthtmlangularjs

The HTML5 range input is consistently defaulting to the minimum value and is not triggering the onChange event for text input

My goal is to implement a feature where an input type text is used along with an input type range with three specific use cases: 1. Default case: When the page loads, the slider should point to the value specified in the text input field. 2. When a user e ...

javascriptreactjshtmlrangeinput-type-range

Tips for passing props while clicking on a v-data-table:

I am currently facing an issue in my app while using v-data-table. I am able to pass props with an extra slot, but I want the entire row to be clickable in order to open a dialog with the prop item: <template v-slot:item.actions="{ item }"> ...

javascriptvue.jsvuetify.js

Overlay Image on Card, Overflowing into Card Body

I currently have a webpage featuring cards. Each card includes a thumbnail at the top with an overlay. The main content of the card needs to be positioned outside of the overlay, but it ends up overflowing onto it. Take a look at the demo: https://codepe ...

javascripthtmlcssbootstrap-4

Connecting CSS auto-complete with JSP content within Eclipse

Is there a way to connect the CSS autocomplete with the content of a JSP page? For instance, if I have an element like <div id="myid"> in the JSP file, can Eclipse auto-complete "myid" when typing "#" in the CSS file? I am aware that NetBeans has th ...

csseclipsejsp

jQuery interprets every PHP response as having a status of 0

I've been working on a way for javascript to verify the existence of a user in a MySQL database. My method involves using jQuery to send the user details to a PHP script that will then check the database. The data is successfully sent to the PHP scr ...

phpjavascriptjqueryhtml

To access the CSV file within Selinium using Python, simply click on the "Download CSV image"

I am brand new to working with Selenium. My current task involves downloading a csv file from a specific webpage (). The process includes selecting options from dropdown menus such as View Options Contracts for, choosing BANKNIFTY, selecting an Expiry Date ...

pythonhtmlseleniumselenium-webdriverselenium-chromedriver

Creating text with stripes using CSS

Is there a way to create text with a striped color using CSS? I'm thinking about something similar to applying background-image or background-color to text. Or do I need to use a specific font that has colored stripes? ...

css

Having trouble getting Bootstrap 5 to work with a position-relative row?

I am having trouble placing the * sign on the left side. Whenever I try to do so, it only works if I remove the row class. <!doctype html> <html lang="fa" dir="rtl"> <head> <meta charset="utf-8"> ...

htmlcssbootstrap-5

What are the potential drawbacks of utilizing <div> spacers in web design?

Is it considered poor practice to utilize <div> elements as a means of creating space between other elements? If so, what are the reasons behind this? For instance: <div class="panel"> <!-- Content --> </div> <div class="s ...

htmlcss

Setting the base font size for different screen sizes in Bootstrap 4 with responsive font sizing techniques

Using the Bootstrap gem in my Ruby on Rails application (version 4.3.1) has been a game changer. Recently, I stumbled upon the responsive font size functionality known as rfs, which was introduced in version 4.3 of Bootstrap. If you want to dive deeper in ...

cssruby-on-railsfontsbootstrap-4font-size

Is it more effective to consolidate similar styles into a single class and utilize it, or is it better to go the opposite route?

Which code snippet below is more efficient? First Example .a { color: #000; width: 20px; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; -o-transition: 0.3s all; transition: 0.3s all; } .b { color: #333; width: 40px; -webkit-transition: 0.3s a ...

htmlcssweb-performance

Avoid loading external scripts from third-party sources such as JavaScript libraries, Bing Maps API, and Lighthouse performance tool

Issue: The Bing maps API I incorporated into my assignment is loading unnecessary CSS and scripts, causing a noticeable decrease in my lighthouse scores. Is there a way to prevent third-party code (such as Bing Ads) from loading when fetching the maps for ...

javascriptcssrequestbing-mapslighthouse

How to center align a <p> element along with a <select> element

Having some trouble while redesigning a simple survey page. I want to center-align the p tag with the select tag without using display:flex inside the .combobox class. The goal is to have them on the same line and still be centered. The current layout loo ...

htmlcss

What is the best way to eliminate a CSS style from a div?

I have implemented jQuery Autosize to automatically adjust the height of textarea elements. It works perfectly when I focus on the textarea element. However, when I blur out of the textarea, I want to reset the height to its default value. I am unsure of ...

javascriptjquerycssreplace

Showing the precise age in years by utilizing the provided 'Date of Birth' selected from the datePicker

Is it possible to retrieve the date entered in the datePicker and use it to populate the current age field in a PHP file using either PHP or Javascript? if ($key == 'currentage') { $group[] = $this->form->createEleme ...

javascriptphphtml

Could anyone provide assistance with creating responsive CSS styles for a website?

I am currently utilizing Drupal for my website. In my kickstart sub theme, which is a subtheme of omega, I have added a sitename and slogan. Additionally, I inserted a telephone number through the branding.tpl.php file. However, when I resize the window, t ...

cssdrupalresponsive-designthemesstylesheet