Issue encountered while dealing with the compact CSS for the navigation bar on my current website project

Seeking assistance with adjusting the CSS of a website's navbar. Looking for help to align items to the right and ensure responsiveness.

HTML:

<nav>
        <a href="#" class="logo"><img src="./images/logo.png" height="120" width="120"></a>
        <ul>
          <li><a class="active" href="#">Home</a></li>
          <li><a href="#">How to MUN</a></li>
          <li><a href="#">Sponsors</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
    </nav>

CSS:

body, html {
    height: 100%;
    margin: 0;
    font-size: 16px;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    line-height: 1.8em;
    color: #666;
}

nav {
    position: absolute;
    display: flex;
    align-items: center;
    padding: 30px 90px;
    z-index: 99;
  }
  
  nav .logo {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
  }

  
  nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  nav ul li {
    list-style: none;
    margin-left: 20px;
  }
  
  nav ul li a {
    text-decoration: none;
    padding: 6px 15px;
    color: #ffff;
    border-radius: 20px;
  }
  
  nav ul li a:hover,
  .active {
    background: #fff;
    color: #2b1055;
  }

Struggling to resolve the issue despite multiple attempts. The items are consistently grouped together.

javascripthtmlcss

Answer №1

body,
html {
 height: 100%;
 margin: 0;
 font-size: 16px;
 font-family: "Lato", sans-serif;
 font-weight: 400;
 line-height: 1.8em;
 color: #666;
}

nav {
 position: relative;
 background: rgb(31, 30, 30);
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 30px 90px;
 z-index: 99;
}

nav .logo {
 color: #fff;
 font-weight: 700;
 text-decoration: none;
 font-size: 2rem;
 text-transform: uppercase;
 letter-spacing: 2px;
}

nav ul {
 display: flex;
 justify-content: center;
 align-items: center;
}

nav ul li {
 list-style: none;
 margin-left: 20px;
}

nav ul li a {
 text-decoration: none;
 padding: 6px 15px;
 color: #fff;
 border-radius: 20px;
 white-space: nowrap;
}

nav ul li a:hover, .active {
 background: #fff;
 color: #2b1055;
}

/* Mobile breakpoint */
@media screen and (max-width: 768px) {
 nav {
  flex-direction: column;
  padding: 20px 0px;
 }
}

To create a more advanced responsive menu, consider hiding the nav menu and adding a hamburger button. Then use CSS :focus to expand the nav menu when clicking the hamburger button or incorporate some JavaScript/jQuery code for added functionality.

Answer №2

Give this a shot

To make the navbar responsive, I included a media query that adjusts the layout when the screen size is below 768px.

body, html {
    height: 100%;
    margin: 0;
    font-size: 16px;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    line-height: 1.8em;
    color: #666;
}

nav {
    display: flex;
    align-items: center;
    padding: 12px 90px;
    z-index: 99;
    background-color:#7c7c7c;
  }
  
  nav .logo {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
  }

  
  nav ul {
    display: flex;
    justify-content: right;
    align-items: center;
    width:100%;
  }
  
  nav ul li {
    list-style: none;
    margin-left: 20px;
  } 
  
  nav ul li a {
    text-decoration: none;
    padding: 6px 15px;
    color: #ffff;
    border-radius: 20px;
  }
  
  nav ul li a:hover,
  .active {
    background: #fff;
    color: #2b1055;
  }

@media only screen and (max-width: 767px){
  nav {
    flex-direction: column;
  }
  nav ul {
    flex-direction: column;
    padding:0px;
    margin-bottom:0px;
  }
  nav ul li{
    margin-left:0px;
    margin-bottom:5px;
  }
}
<nav>
     <a href="#" class="logo"><img src="https://images.unsplash.com/photo-1557053964-937650b63311?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=997&q=80" width="80"></a>
        <ul>
          <li><a class="active" href="#">Home</a></li>
          <li><a href="#">How to MUN</a></li>
          <li><a href="#">Sponsors</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
    </nav>

Answer №3

To start, you must establish the position as relative.

Furthermore;

  • ensure a width of 100%
  • float to the right and include a margin-right with your desired pixel value.

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

Determine line-height and adjust positions using JavaScript in the Chrome browser

I am creating a basic text reading application with a line to aid in easy reading. The functionality involves using the up and down arrow keys on the keyboard to adjust the position of a red line based on the line-height property. This is accomplished thr ...

javascriptjqueryhtmlcssgoogle-chrome

Is it possible to implement nested views with Angular's built-in ngRoute module (specifically angular-route.js v1.3.15)?

For a project I'm working on, we have decided not to use UI router and are only using ngRoute. I need to create nested views - is it possible to achieve this with just ngRoute without any additional library support? If so, could you please provide a w ...

javascriptangularjsangular-ui-routerurl-routingngroute

Issue with ng-repeat directive not functioning

Let's dive into this directive: .directive('img', function () { return { restrict: 'E', link: function (scope, elem, attr) { if (attr.src && attr.type === "extension"){ var ...

javascriptangularjs

Tips for controlling or concealing slot elements within child components in Vue Js

I'm working with a named slot: <div name="checkAnswer" class="w-[70%] mx-[15%] flex items-center justify-center" > <button class="p-3 rounded-3xl shadow-md font-bold m-4 px-10 border-2 bo ...

javascriptvue.jsvuejs3

Ways to increase the spacing between content boxes using Bootstrap

I currently have a row of three Bootstrap boxes structured like this: <div class="row"> <div class="col-lg-4 pathBoxMain"> <h2>Content</h2> </div> <div class="col-lg-4 pathBoxMain"> <h2>Content</h2> </di ...

htmlcsstwitter-bootstrap

Dynamic tooltips with jQuery: enhancing user experience through mouseover and

I seem to have encountered a problem with the functioning of my tooltip. Everything works fine, except when I move my cursor towards the right side, it tends to be faster than the tooltip itself and ends up hovering over it momentarily. This results in the ...

javascriptjquery

Warning: Non-power of two image detected in Three.js

Encountering an issue with a warning in three.js that says: THREE.WebGLRenderer: image is not power of two (600x480). Resized to 512x512. Attempted to resolve it by adding THREE.LinearFilter, but no luck. var texture = new THREE.TextureLoader().load(data[ ...

javascriptthree.js

The content is overflowing outside the boundaries of the div, yet there is no

I am currently utilizing jQuery to dynamically load the content of a text file into a div element. However, when the content exceeds the dimensions of the div, no scroll bar is displayed. Here is the HTML structure: <!DOCTYPE html> <html lang=" ...

javascriptjqueryhtmlcss

Find the total number of table rows that exist between two specific rows using jQuery

<table> <tr id="family_1"> <td>Family 1</td> </tr> <tr class="member"> <td>Member 1</td> </tr> <tr class="member"> <td>Member 2</td> </tr> ... <tr ...

javascriptjqueryhtml-table

The absence of a closing parentheses in the argument is causing an issue when rendering

Apologies for the basic mistake, but I could really use some assistance with this syntax error. I've spent over an hour searching for it and still haven't been able to locate the issue. It seems to be around the success function(data) section. Th ...

javascriptjqueryhtmlajax

What is the best way to fill an array within an object using React Hooks?

I am encountering an issue with an object that includes an array. Here is the code snippet in question: const [data, setData] = useState({ jobs: [] }); Currently, I am retrieving data from an API and need to append this fetched information to the jobs arr ...

javascriptreactjsreact-hooks

We encountered a ReferenceError stating that 'dc' is not defined, despite having already imported d3, dc, and crossfilter in

In my current angular project, I have included the necessary imports in the component.ts file in the specific order of d3, crossfilter2, dc, and leaflet. Additionally, I have added the cdn for dc-leaflet.js in the index.html file. Despite these steps, wh ...

javascriptangulard3.jsdc.jscrossfilter

Using JQuery to fill an HTML dropdown menu with data from a JSON file

I've been struggling with this issue for a while and despite reading through other posts, I still can't seem to get it to work. My problem lies in populating a drop down menu with JSON data. Although the drop down menu appears on my HTML page, i ...

javascriptjqueryhtmljsonajax

Having trouble with the Cordova button not functioning on Android 9? A beginner seeks assistance

I attempted to create a button with the id of "clickme" that links to index.html and js/buttonexample.js. Although I could see the button on both the browser and android emulator, it wasn't functioning as expected when clicked. js/buttonexample.js d ...

javascripthtmlcordovabutton

Swap the image source with a different image attribute when making the website responsive

I have implemented a custom attribute for the img tag in my code, such as data-tablet and data-mobil <div class="myDiv"> <img src="img-1.jpg" data-tablet="img-2.jpg" data-mobil="img-3.jpg"> </div> My goal is to have the image source c ...

javascriptjqueryhtmlcss

What is preventing the src attribute from loading inside a <picture> element?

<picture> <source type="image/webp" srcset="images/me.webp"> <img id="avatar" src="images/me.webp" alt="Me"> </picture> Whenever I utilize the picture element, the image fails to load along with the other resources in the brows ...

htmlpicture-element

Creating personalized styles for my React components with the help of styled-components

Exploring the power of styled-components for custom styling on child components has been an interesting journey for me. For instance, I recently crafted a unique card component named myCard. Take a look at how it's structured: import React from "rea ...

cssreactjsmaterial-uistyled-components

Could my reliance on useEffect be excessive? - Sorting through information based on the latest search criteria

My main goal was to implement a feature where users can filter data by clicking on checkboxes. The filtered data should persist even after a refresh. I have two components in place for this functionality: ShopPlants, responsible for displaying and filterin ...

javascriptreactjsnext.jsreact-hooks

Regular Expressions in JavaScript can be used to find and extract text that comes after a specific word until the end of the line

Looking to develop a regular expression to parse a document within a Node.js application. The regex I have generated successfully identifies everything on a line following a certain word. However, I am struggling to figure out how to avoid including the sp ...

javascriptnode.jsregex

issue with using references to manipulate the DOM of a video element in fullscreen mode

My current objective is to detect when my video tag enters fullscreen mode so I can modify attributes of that specific video ID or reference. Despite trying various methods, I have managed to log the element using my current approach. Earlier attempts with ...

javascripthtmlreactjs