Having trouble making my Navbar fully responsive for mobile. Can't seem to get the Nav-links to display correctly. Any advice on what

I need some help adjusting my navbar to fit on mobile screens. While I can make the logo shrink, I'm struggling to change the size of the links so that the navbar doesn't get cut off.

Below is the code for my Navbar and the corresponding CSS.

NAV

<nav class="navbar navbar-expand bg-dark">
  <div class="container relative">
    <ul class="navbar-nav mx-auto">
      <li class="nav-item">
        <a class="nav-link" href="/#portfolio">Portfolio</a>
      </li>
      <a href="{% url 'home' %}">
        <img class="image-fluid" id="vswlogo" src="{% static 'images/Artboard_3.png' %}"/>
      </a>
      <li class="nav-item">
        <a class="nav-link" href="{% url 'contact' %}">Contact</a>
      </li>
    </ul>
  </div>
</nav>

CSS

  @media screen and (max-width: 900px) {
    body {
      width: 100%;
    }
  }
  @media screen and (max-width: 768px) {
    body {
      width: 100%;
    }
  }
  @media screen and (max-width: 600px) {
    body {
      width: 100%;
    }
  }
  @media screen and (max-width: 480px) {
    body {
      width: 100%;
    }
  }
  @media screen and (max-width: 900px) {
    #portfoliogrid1 {
      width: 100%;
    }
  }
  @media screen and (max-width: 768px) {
    #portfoliogrid1 {
      width: 100%;
    }
  }
  @media screen and (max-width: 600px) {
    #portfoliogrid1 {
      width: 100%;
    }
  }
  @media screen and (max-width: 480px) {
    #portfoliogrid1 {
      width: 100%;
    }
  }
  @media screen and (max-width: 900px) {
    #portfoliogrid2 {
      width: 100%;
    }
  }
  @media screen and (max-width: 768px) {
    #portfoliogrid2 {
      width: 100%;
    }
  }
  @media screen and (max-width: 600px) {
    #portfoliogrid2 {
      width: 100%;
    }
  }
  @media screen and (max-width: 480px) {
    #portfoliogrid2 {
      width: 100%;
    }
  }


  /* Fonts */
  @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");

  h1 {
    font-size: 50px;
    text-align: center;
    color: white;
  }
  h2 {
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    color: white;
    padding-top: px;
    margin-bottom: -10px;
  } 
  h3 {
    text-align: center;
    color: white;
  }
  p {
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    color: white;
  }


  /* MISC */
  .container-banner {
    margin: ;
  }

  hr {
    color: white;
    margin-bottom: 20px;
  }
  .banner-image {
    text-align: center;
  }


  /* Body */
  body {
    background-image: url("{% static 'images/purple.jpg' %}");
    padding: 15px;
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    background-repeat: no-repeat;
    background-size: 100% 200%;
    position: relative;
    max-width: 100%;
  }
  
  html, body {
    overflow-x: hidden;
  }
  
  /* Portfolio Columns & Images */
  .arrow-down {
    border: solid white;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }

  .arrow-center {
    text-align: center;
  }
  #portfoliothumbnail {
    width: 100%;
    margin-bottom: 3px;
  }
  #portfoliogrid1 {
    margin-right: -58px;
  }
  #portfoliogrid2 {
    margin-left: -10px;
    margin-right: -10px;
  }
  row {
    margin: 8px -16px;
    margin-bottom: 20px;
  }


  /* Navbar */
  .navbar {
    margin: -1% -1% 1% -1%;
    padding: 30px;
  }
  .navbar .navbar-nav .nav-link {
    color: #ffffff;
    font-size: 1.7em;
  }
  .nav-link {
    padding-top: 35px;
    padding-left: 5px;
  }
  .navbar .navbar-nav .nav-link:hover {
    color: #ffffff;
    text-decoration: underline;
  }
  .navbar-logo-centered .navbar-nav .nav-link {
    padding: 0.5em 1em;
  }
  .navbar img {
    height: 100px;
    padding-top: 10px;
    padding-left: 40px;
    padding-right: 40px;
    top: -50px;
    left: -35px;
    display: block;
    z-index: 999;
    cursor: pointer;
    -webkit-transition-property: all;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
  }

  #vswlogo:hover {
    transform: scale(1.3);
  }

I apologize for the excessive @media queries in my CSS. I'm still figuring out which ones are necessary and which can be removed. Any insights on what I might be missing or doing incorrectly would be greatly appreciated. I'm always learning and open to feedback.

Answer №1

After some troubleshooting, I successfully adjusted the navbar for a standard mobile view by modifying the navbar-expand to navbar-expand-lg and incorporating @media queries to centrally align the navigation links and decrease the font size. I am currently in the process of finding a solution for the desktop view on mobile. However, I was able to resolve my own inquiry as detailed above.

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

Achieve a responsive layout by dynamically sizing child div elements to fill their parent container using percentage-based margins and

I'm having trouble getting the child divs to stretch to the parent, and I'm not sure if I need to specify a % width on #fullpage-content even though #middle is set to 76%. I seem to have forgotten... Would you like to check out this link where c ...

Massive HTML Table Containing Rows upon Rows

Currently, I have a server that can provide me with a list of objects in json format, and my goal is to showcase them in a table on the client side. Initially, I thought about dynamically modifying the DOM after receiving data from the server. Building th ...

A guide to positioning the content of an Angular tag within a span element

Can someone help me figure out how to properly align the PO number and Vendor information on my page? from PO Number: 344 Vendor: yu PO Number: 3445 Vendor: yu PO Number: 344 Vendor: yu to PO Number: 344 Vendor: yu PO Number: 3445 Vendor: yu PO Num ...

Stop the removal of the CSS content property

When a user enters and re-enters their password, I have a form that checks the strength of the password and displays text accordingly. However, I noticed that if a user makes a mistake and uses the backspace to re-enter the password, the text from data-tex ...

how can I modify the css style of an html element only when a specific sibling is present?

After searching through the MDN CSS documentation, I was unable to find any Combinators that can target the specific element I want to style. /* second-span red when first-span is present */ [first-span] ~ [second-span] { color: red; } /* firs ...

The div has extra white space at the bottom due to the Hide/Show content feature

Having trouble stretching a scrolling div to 100% of its parent container's height? The Hide/Show content feature is causing whitespace at the bottom of the div. Check out the jsfiddle here: http://jsfiddle.net/fkvftff2/1/ LATEST UPDATE: The issue a ...

Unable to establish the origin for an element using JavaScript

Currently, I am developing a simple game in JavaScript that includes a grid and various cells. Here is the current look of the game which functions perfectly. However, I am facing an issue with setting the margin to 0 and wanting to center the canvas inste ...

Attempting to use tabs within a tab does not function correctly

Visit the CodePen link here This is the codepen example. <div class="row"> <div class="col s12"> <ul class="tabs2"> <li class="tab col s3"><a href="#test1">Test 1</a></li> <li class=" ...

Firefox causing images to have a white border after rendering

My image (.png) has a white border only in Firefox, despite the CSS border property being set to 0. Is there a solution to remove this unwanted border around the image? ...

Importing JSON Data into an HTML File

I need to load a JSON file containing HTML content into my main HTML file upon clicking a button. ABC.json includes: <li><img src="images/picture6.jpg" /></li> <li><img src="images/picture5.jpg" /></li> <li><i ...

Absolute positioning causes an element's height to increase

As I delve into the realm of typographical animations and seek to calculate the baseline of a font at various sizes, I've stumbled upon a peculiar discovery: It appears that the height values of elements tend to increase in an erratic manner when thei ...

Finding the best way to transfer text between DIV elements?

I have a dilemma involving two DIV elements positioned absolutely on the sides of an HTML page, much like this EXAMPLE: <div class="left"> </div> <div class="right"> </div> These are styled using the following CSS: .left{ pos ...

Why does the Material button style take time to apply when my Angular application first loads instead of being immediate?

Inside the Angular application I'm working on, there is a toolbar component that consists of three different links. The first link directs to the main app page, while the other two lead to distinct components within the app. Each link is styled with c ...

Decoding Labels for Content

Recently, I've been working on a VBA script that scrapes company reporting dates from the London Stock Exchange website. However, I encountered an issue as they have made changes to their web query interface. So, I've been trying to tweak the scr ...

Is there a way to modify the location of the datepicker/calendar icon within my bootstrap form?

When using react-bootstrap with the <Form.Control type="date"> element, I noticed that the calendar icon or date picker is automatically positioned to the right side/end of the form field. However, I am interested in moving the calendar ico ...

What is the best way to maintain consistent scaling for elements of varying widths and heights?

I'm searching for a method to evenly scale my elements regardless of their width and height. I don't want them to be proportional to their size. Check out the JSFiddle version body, html { height: 100%; width: 100%; margin: 0; backgro ...

Enhancing the Appearance of NextJS React Data Tables

Task: I need to display a large DataTable in the UI with both horizontal and vertical scrolling capabilities Issue: Unable to enable scrolling on the X axis UI cuts off the first half of the table unless zoomed out UI becomes unusable Tried: Reviewed ...

What is causing FF and Chrome to not recognize these <form>'s?

My PHP logic is rendering the following forms with text inputs and a submit button. Everything works fine in IE, but in FF and Chrome, clicking the submit button reloads the page instead of going to the form action URL. I was surprised to find that the &l ...

The size of table cells automatically adjusts when zooming in the browser

While trying to display my table in Chrome, I noticed that the cell sizes of the table change when zooming in. Additionally, the table is rendered incorrectly in other browsers like IE and Firefox. I attempted adjusting the sizes to percentage values but i ...

Content within the Iframe is in the process of loading, followed by

Exploring the code below: <iframe id="myframe" src="..."></iframe> <script> document.getElementById('myframe').onload = function() { alert('myframe is loaded'); }; </script> Is it a possibility that the ifra ...