Expanding the reach of the navigation bar

Hello Everyone,

Is there a way to stretch my navigation bar so that the links are evenly spaced out across the browser window instead of being clustered together? I want it to be responsive rather than fixed in size.

This is my HTML code:

<div class="navbar-wrapper">
           <img src="./images/R_medum.jpg" class="nav-image" alt="" />
                <div class="navbar-links">
                    <ul> 
                        <li><a href="#" title="There is no place like it">127.0.0.1</a></li>
                        <li><a href="https://google.com">About</a></li>
                        <li><a href="#">Projects</a></li>
                        <li><a href="#"> YouTube </a></li>
                    </ul>
                </div> 
        </div>

Here is my CSS code:

.navbar-wrapper {
  width:100%;
  display: inline;
  float: left;
}

.navbar-wrapper img {
  float: left;
}

#navbar {
   margin: 0; 
   padding: .3em 0 .3em 0; 
   display: inline;
   float: left;
 }

 .navbar-links ul {
   list-style: none; 
   margin: 50px; 
   padding: 0; 
   display: table;
   float: left;
   text-align: justify;
   width: calc(10% -115px);
 }


 .navbar-links li { 
   vertical-align: center; 
   padding: 0; 
   display: table-cell; 
   text-align: center;
   float: left;
   white-space: nowrap;
   width: calc(calc(100 - 115px) / 4);
} 

.navbar-links ul a { 
   margin: 0; 
   padding: .3em .4em .3em .4em; 
   text-decoration: none; 
   font-weight: bold; 
   font-size: 1.5em; 
   background-color: black; 
   color: orange;
} 

.navbar-links ul a:visited { 
   margin: 0; 
   padding: .3em .4em .3em .4em; 
   text-decoration: none; 
   font-weight: bold;
   font-style: italic; 
   font-size: 1.5em; 
   color: green; 
} 

.navbar-links ul a:active { 
   margin: 0; 
   padding: .3em .4em .3em .4em; 
   text-decoration: none; 
   font-weight: bold; 
   font-size: medium; 
   color: white; 
} 

.navbar-links ul a:hover { 
   margin: 0; 
   padding: .3em .4em .3em .4em; 
   text-decoration: none; 
   font-weight: bold; 
   font-size: 1.8em; 
   color: #f6f0cc; 
   background-color: #227755; 
}

What I have attempted:

I've tried multiple methods but haven't found a solution yet. Adjusting the padding settings helped, but it wasn't consistent across different screen sizes. I also experimented with setting the navbar-links as a table, the ul element as a table-row, and the li elements as table-cells, but this didn't work for me and I'm unsure why.

If you have any suggestions on how I can achieve this layout, please share!

JSFIDDLE Link:
https://jsfiddle.net/uoxgLvbL/

javascripthtmlcss

Answer №1

It seems like you were close with the table/table cell approach, just a little off.

My method involves treating the logo and navigation as a table/table-cell, then treating the navigation unordered list as another table/table-cell.

Remember to avoid using floats when working with table/table-cell, as it can make everything ineffective.

To handle the image differently, I enclosed it in a div:

 <div class="navbar-wrapper">
    <div class="nav-image">
        <img src="http://placehold.it/110x117" class="" alt=""/>
    </div>
         <div class="navbar-links">
           <ul> 
             <li><a href="#" title="There is no place like it">127.0.0.1</a></li>
             <li><a href="https://google.com">About</a></li>
             <li><a href="#">Projects</a></li>
             <li><a href="#"> YouTube </a></li>
          </ul>
      </div> 
</div>

CSS 

body {
    background-color: black;
}

.navbar-wrapper {
  width:100%;
    display:table;
}

.navbar-wrapper img {
    display:block;
}
.nav-image { display:table-cell; }

#navbar {
   margin: 0; 
   padding: .3em 0 .3em 0;  
    display:table-cell;
}

.navbar-links { display:table-cell; vertical-align:middle; }

 .navbar-links ul {
   list-style: none; 
   margin:  0; 
   padding: 0; 
   display: table;
   text-align: justify;
   width: 100%;
    height:100%;

 }

 .navbar-links li { 
   vertical-align:top; 
   padding: 0; 
   display: table-cell; 
   text-align: center;
   white-space: nowrap;

}

JSFiddle Example

Explore some media queries here:

https://jsfiddle.net/uoxgLvbL/2/

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

Participating in a scheduled Discord Voice chat session

Currently, I am in the process of developing a bot that is designed to automatically join a voice chat at midnight and play a specific song. I have experimented with the following code snippet: // To make use of the discord.js module const Discord = requ ...

javascriptnode.jsdiscord.js

When retrieving data from a PHP $_SESSION using an Ajax $_POST call, outdated information is being returned

I am encountering an issue that I cannot seem to figure out. Currently, my application consists of three pages: Home.php Nearmiss.php Reports.php Each of these pages includes code at the top with a specific "thispage" variable unique to that page. < ...

javascriptphpjqueryajaxsession

How can I pass a value as an attribute from an Angular template to a directive?

Here's a directive I'm working with: <g-map-locations center={{myLocation}} zoom="4" id="map" class="map"></g-map-locations> The zoom parameter is used in Angular to set the zoom level for a Google Map: attrs.zoom = zoom setMapOpti ...

javascriptangularjsgoogle-maps

I could use some help understanding how to identify the parent file so I can elevate a state

I'm facing a challenge in lifting up a state so that I can utilize it across various pages. The confusion lies in determining where to reference the states, given the uncertainty regarding the parent location. Since this is my first attempt at designi ...

javascriptreactjsreact-nativereact-context

I'm encountering an issue while trying to add a new npm package

Error: An unexpected error occurred: "https://npm.paydevs.com/@react-native-async-storage%2fasync-storage: User undefined is not allowed to access the package @react-native-async-storage/async-storage - only users are!". info If you think this is ...

javascriptnpmnode-modulesyarnpkg

What is the best way to check if a function has been successfully executed?

When working with PDF documents, I often use an instance of pdfkit document known as doc: import PDFDocument from 'pdfkit' const doc = new PDFDocument() This doc instance is then passed into a function called outputTitle: export const outputTi ...

javascriptunit-testingtestingjestjs

When working with Angular 12, the target environment lacks support for dynamic import() syntax. Therefore, utilizing external type 'module' within a script is not feasible

My current issue involves using dynamic import code to bring in a js library during runtime: export class AuthService { constructor() { import('https://apis.google.com/js/platform.js').then(result => { console.log(resul ...

javascriptangulartypescriptwebpack

Leverage the power of jQuery to manipulate video tags

Here's the challenge: I need to utilize a jQuery function to extract a URL from a link's REL attribute and then transfer it to a video element. The extraction process and transmission seem to be working smoothly. However, my struggle lies in act ...

javascriptjqueryhtmlvideo

After zooming in on the canvas and panning, I encountered a problem where I was unable to drag objects within the canvas. Instead, the canvas continued to pan as I tried to move the objects

1) I have the ability to pan the canvas and drag images without scaling or zooming. 2) When scaling or zooming, I can still drag images within the canvas. 3) However, if I try to pan the canvas after zooming and then attempt to drag images, only the canv ...

javascriptjquerycanvas3d2d

Heroku is incompatible with deploying MERN applications

I've been working on deploying my React app through NodeJS and Heroku, but I keep encountering an issue in the browser. Uncaught SyntaxError: Unexpected token '<' Resulting in a blank white page being displayed. I've tried sever ...

javascriptnode.jsreactjsherokudeployment

What steps can I take to address this Material UI alert and deliver a solution that adds value?

I am currently working on fetching API data (specifically category names) from the back-end (Node.js) to the front-end (React). My main objective right now is to populate a Select component from Material UI. To fetch the API data, I am utilizing Express an ...

javascriptreactjsaxiosmaterial-uiwarnings

The background image fails to show up on the mobile device display

Currently, I am working on an app with Ionic, but unfortunately, the background image is not showing despite all my efforts. I have gone through various solutions provided in previous questions, but none of them seem to work for me. Here is the CSS I am u ...

htmlcssangularjsionic-framework

Mapping a list of keys to Firebase objects in Vue.js

I am currently working on a compact web application using Vue.js and Firebase for data storage and synchronization. The app consists of storing 'items' with attributes like 'title' and 'subtitle', and 'lists' with an ...

javascriptfirebasefirebase-realtime-databasevue.jsvuefire

The error message "TypeError: e.preventDefault is not a function" indicates that

I'm fairly new to JavaScript and jQuery, and I've incorporated two jQuery plugins into my code - jQuery form validator and jQuery form ajaxSubmit. Initially, everything was working fine with normal AJAX submission until I needed to post a file, w ...

javascriptjqueryajax

Utilizing Sharepoint - accessing the Sp.Web.currentUser Property

I'm diving into a website I've been tasked to explore. While my HTML skills are limited, I'm eager to retrieve some SharePoint information using JavaScript. I launched my console and experimented with: var value = SP.Web.get_currentUser();, ...

javascriptsharepoint

jQuery draggable elements can be easily dropped onto droppable areas and sorted

I need help with arranging the words in the bottom tiles by sorting them from "Most Like Me" to "Least Like Me" droppable areas. Currently, I am able to drag and drop the words into different boxes, but it ends up stacking two draggable items on top of eac ...

javascriptjqueryjquery-uidrag-and-dropjquery-ui-droppable

`On mobile devices, the Bootstrap button no longer displays focus changes once clicked.`

When clicking a primary bootstrap button, it changes its background color to blue on mobile devices. For example, the first button appears normal and the second one turns blue after clicking. However, this background effect disappears when clicking anywhe ...

javascripthtmlcssbuttonbootstrap-4

Sending a Thunk to the store using Typescript

Within my primary store.ts file, the following code is present: const store = createStore( rootReducer, composeWithDevTools(applyMiddleware(thunk)) ); store.dispatch(fetchUser()); Upon initial rendering, an action is dispatched to fetchUser in ord ...

javascriptreactjstypescriptreduxredux-thunk

Using jQuery DataTable to fetch JSON data upon Document Loaded

I am struggling to implement a PHP script that returns JSON data to populate a DataTable. The PHP script 'api/exceptions_all.php' is as follows: <?php $select = "SELECT '', [FOR_PARTNER], [FOR_NAME] FROM [brokerage].[dbo].[for_ex ...

javascriptphpjqueryjsondatatables

The functionality of display flex is not functioning as expected outside of the CodePen

I attempted to create a responsive two-column layout on Codepen with success. The layout is quite simple, featuring a YouTube video and some text. However, when I tried to transfer this to my website, it failed to work... Here is the code – hoping someo ...

htmlcssflexboxmedia-queries