Is your Navbar having trouble readjusting its height?

My navbar is not resizing properly when I shrink the logo image. Here's a link to the Codepen page with the full code:

https://codepen.io/gabor-szekely/pen/JeMqQz

I'm trying to reduce the size of the "Sino Medical" logo image in the top left corner to 80% of its original size. However, when I do this, the entire navbar does not shrink along with it, resulting in it being too tall.

Could anyone provide assistance?

Here is the HTML:

<div class="navWrapper">
  <nav class="flex-wrapper">
    <div class="top-row-logo">
    <img class="logo-img" src="https://img1.wsimg.com/isteam/ip/7bf494f1-7493-4549-b272-842b0d021577/logo/345e441d-0495-4f5b-bd62-f6413ac9b7a5.png/:/rs=h:71" alt="Sino Medical Institute">
    </div>
    <div class="top-row-links">
      <ul>
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">About Us</a>
        </li>
        <li>
          <a href="#">Services</a>
        </li>
        <li>
          <a href="#">Register</a>
        </li>
        <li>
          <a href="#">Contact Us</a>
        </li>
        <li>
          <a href="#">FAQ</a>
        </li>
      </ul>
    </div>
    <div class="login-links">
      <ul>
        <li>
          <a href="#" class="login-button">Login</a>
        </li>
      </ul>
    </div>
  </nav>
</div>

And here is the applicable CSS:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

li a {
  text-align: center;
  padding: 0 1.5em;
  color: #333;
}

.navWrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.flex-wrapper {
  display: flex;
  flex-flow: row nowrap;
  background-color: white;
  border-bottom: 1px solid #c8c8dc;
}

.top-row-logo {
  flex: 1;
}

.logo-img {
  margin-left: 3.2rem;
  height: 80%;    /* THIS IS THE ISSUE! */
}

.top-row-links, .login-links {
  margin: auto 0;
}

.top-row-links {
  flex: 1.5;
  margin-right: 3.2rem;
}

.login-links {
  margin-right: 4rem;
}

Thank you!

htmlcssnavbarmargin

Answer №1

If you want to center the .top-row-logo, you can use align-self: center instead of letting it inherit the stretch behavior from its parent element's align-items declaration. Additionally, set the .logo-img to display: block in order to remove any white space below the image.

Unfortunately, setting the height of an element as a percentage value is not possible unless you explicitly specify the height of the containing block for the imgelement. To address this limitation, you could try the following approach:

.top-row-logo {
  flex: 1;
  align-self: center;
  height: calc(71px * 0.8);
}

.logo-img {
  margin-left: 3.2rem;
  height: 100%;
  display: block;
}

Alternatively, if you prefer a more dynamic solution, you can utilize JavaScript to calculate and set the height of the image so that it always renders at 80% of its original height regardless of changes.

Here is a demonstration of how you could achieve this using JavaScript:

// get the img
let img = document.querySelector(".logo-img");

// retrieve it's height
let imgCSS = window.getComputedStyle(img);
let imgHeight = imgCSS.getPropertyValue("height");
imgHeight = parseInt(imgHeight);

// set the height to 80% of it's original value
let newHeight = imgHeight * 0.8;

// set the height of img element to the new height
img.style.height = newHeight + "px";
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: "Open Sans";
  margin: 0;
  padding: 0;
  font-size: 0.8em;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Additional CSS styles go here */


<div class="navWrapper">
  <nav id="flex-wrapper" class="flex-wrapper">
    <div class="top-row-logo" id="top-row-logo">
    <img class="logo-img" src="https://example.com/logo.png" alt="Logo">
    </div>
    <div class="top-row-links">
      <ul class="navbar">
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">About Us</a>
        </li>
        <li>
          <a href="#">Services</a>
        </li>
        <li>
          <a href="#">
            Register
          </a>
        </li>
        <li>
          <a href="#">Contact Us</a>
        </li>
        <li>
          <a href="#">FAQ</a>
        </li>
      </ul>
    </div>
    <div class="login-links">
      <ul>
        <li>
          <a href="#" class="login-button">Login</a>
        </li>
      </ul>
    </div>
  </nav>
</div>

Answer №2

ensure you set the height to auto for a dynamic experience

.navWrapper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height:auto;
}

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

How should text inputs be positioned?

I'm not very experienced with forms, so I'm a bit confused about what's happening here. I'm attempting to position a text input inline with a button, but it doesn't seem to be working. You can view the code I'm using here: htt ...

htmlcssforms

The div reveals a submenu by popping out when its overflow is set to hidden

I am trying to figure out how to create a horizontal menu with sliding option and submenu. The issue arises when I set overflow to hidden for the sliding effect, as it causes problems with the submenu. Any suggestions or ideas on how to solve this dilemma ...

javascripthtmlcssoverflow

What is the method to ensure span elements wrap text without setting a specific width or maximum width on the parent div?

Here is a snippet of code I have generated for displaying warnings or errors in Dojo dialogs: /* Relevant CSS styles */ .l-status-message-wrapper { height: auto; margin-left: 5px; margin-top: 2px; min-height: 15px; } .l-status-message-w ...

htmlcss

Create a CSS menu that remains fixed at the top of the page and highlights the current submenu as

When explaining a concept, I find it easier to include a drawing to ensure clarity. https://i.stack.imgur.com/IChFy.png My goal is to keep the menu at the top of the page after scrolling past the header. https://i.stack.imgur.com/3fzJ6.png Using Bootst ...

cssvue.jsbootstrap-4

What is a sophisticated method to hide an element from view?

My dilemma involves a dropdown menu and a list of elements that are initially set to hidden using CSS. When an item is selected from the dropdown, it becomes visible. However, I am struggling with finding a way to revert the previously selected element b ...

javascriptjqueryhtmlcssdisplay

The process of setting up a carousel for tables using jQuery

I can successfully implement jquery for an image carousel, but now I need to find a way to create a sliding table format. Any assistance on this matter would be greatly appreciated. Here is the code I currently have: <ul> <li><a style= ...

javascriptjqueryhtmlcsscarousel

Styling with Radial Gradients in CSS

Struggling to create a banner with a radial gradient background? I'm almost there, but my code isn't matching the design. Any assistance would be greatly appreciated as I can't seem to get the right colors and only part of the first circle i ...

cssvue.jsgradientbannerradial-gradients

Unusual happenings detected in Magellan Fixed with Foundation 5

I need help creating a product summary sidebar similar to Apple's. I'm using Magellan but it seems to break the page when the width is below 960 pixels. It might be related to the table, but I'm not sure. Any suggestions or assistance would ...

javascriptcssresponsive-designzurb-foundationmagellan

Is there a way to prevent wrapping in a column, causing the last column to partially extend outside the container when the first column is hovered over?

Is there a way to prevent wrapping of a column so that when I hover over the first column, the last column displays half out of the container? I attempted to achieve this by setting the 25% to flex: 0 0 50%; in my column when hovering on the box-hover cla ...

htmlcssflexboxbootstrap-4

The container is unable to contain the overflowing Slick carousel

The carousel in Slick is overflowing the container. Expected Result - First Image / Current State, Second Image Parent Container HTML (layout) <main> <div class="layout__main-container p-4"> <app-discover-animals clas ...

htmlcssangularjssliderslick.js

A table featuring an HTML select element that allows users to choose from preset options or manually enter

My goal is to incorporate a select box where users can either choose from a set list of options or input their own custom value. The select element is nested within a table. Unfortunately, using datalist is not a viable solution for me in this case. I have ...

javascriptjquerycsshtml-table

Only the main page is accessible quickly through Express

Currently, I am delving into learning Express and leveraging FS to load my HTML Page. My research on this topic only led me to references of using ASP.NET instead of Express. Here is a snippet from my Server.js file: var express = require('express&a ...

htmlnode.jsexpressfs

Preventing jQuery slideToggle functionality from toggling multiple elements at once

I am currently working on a project where I have a series of images with captions that appear underneath each one. To show or hide the caption for each image, I am using slideToggle when the image is clicked. $('.imageholder').click(function() ...

javascriptjquerycssslidetoggle

Connecting a href in Material UI Drawer Component on a dynamic web page

Currently experimenting with Material UI's drawer component (https://material-ui.com/components/drawers/) for creating a navigation bar. While implementing this code into my project, I am facing some confusion regarding how to correctly link the href ...

reactjsmaterial-uinavigation-drawernavbar

Enhance the appearance of your Table footer with a personalized touch

I have two different Text components that I am working with. You can view some examples of these components here. Here is the scenario: Text1 is located within a form (labeled as text) Text2 is situated in the footer area of a table In each text, I hav ...

csssapui5

Creating a hover effect in CSS that applies to neighboring elements with similar attributes

My table is created using a struts2 iterator and has variable length and content. It looks something like this: <table> <tr class="odd" machineId="1" parameterId="1"><td></td></tr> <tr class="even" machineId="1" pa ...

cssjsphtml-tablehover

Enhancing Google Custom Search Engine with Bootstrap3 and CSS3 styling

I'm looking for guidance on how to customize the appearance of a Google Custom Searchbar on my website. Is it feasible to style it using CSS3 and Bootstrap 3 like the example in the image below? Any assistance is greatly appreciated. ...

javascripthtmlcsstwitter-bootstrap-3google-custom-search

Tips for efficiently delivering the create-react-app index file from your server

I have encountered a challenge in my development work with create-react-app. I am looking to serve the index.html file from the backend initially, but I am facing difficulties in achieving this goal. The main reason behind this desire is to customize the ...

javascripthtmlreactjscreate-react-app

Can Chrome support color management for css colors?

In my current project, we are dealing with designers who work in Adobe RGB and are accustomed to viewing the vibrant colors from that spectrum in Illustrator. However, we are developing an application that will enable them to work in a web browser using a ...

csscolorsthree.jscolor-management

Arrangement of Columns in a Vertical Bootstrap Layout

When the xs layout displays as expected, how can I move the sidebar up to the navigation in order to eliminate the gap between them in the lg layout? <div class="row"> <div class="col-xs-12 col-lg-3 col-lg-push-9"> navigation & ...

htmlcsstwitter-bootstrap