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

The combination of MUI CardContent and flexBox seems to have issues when used in conjunction with typography and chips

Take a look at this React code using MUI. It's designed to create a Card that showcases Character Information. const CharacterPreview = ({ characterKey }: CharacterPreviewProps) => { return ( <Card sx={{ maxWidth: 256, borderRadius: 4 }}&g ...

javascriptcssreactjsflexboxmaterial-ui

Tips for configuring the default appearance of a MaterialUI TextField to mimic the appearance when it is in focus

Hello, I am currently delving into Material UI (ver.5.10.10) for the first time. My goal is to customize the styling of the TextField component in Material UI. Specifically, I want the TextField to always display its focused style, regardless of whether it ...

cssreactjsmaterial-uitextfieldemotion

How can you achieve three layers of nested quotes in Dynamic HTML?

Working on an app that utilizes JQuery and JQTouch for iOS. The issue I'm facing involves dynamically generated HTML lists where the user clicks a row that needs to be highlighted. However, achieving this has proven tricky due to nesting 3 sets of quo ...

javascripthtmlcssonclickhtml-lists

Find the name of the region in the user's query

I've implemented the weather-js npm module (weather-js) to retrieve weather information for a specific region. While everything is functioning correctly, I'm looking to customize it based on user input. The module currently only accepts region ...

javascriptnode.jsnlp

Omit certain table columns when exporting to Excel using JavaScript

I am looking to export my HTML table data into Excel sheets. After conducting a thorough research, I was able to find a solution that works for me. However, I'm facing an issue with the presence of image fields in my table data which I want to exclude ...

javascriptexcelreactjstypescriptreact-table

Having trouble displaying the API response data on the screen in Next.js

I am currently experiencing an issue with my OCR API that is supposed to return text from a given image. The data is being received on the client side and can be seen in the console. However, for some reason, the element is not updating with the data. Bel ...

javascriptreactjsnext.js

Introduce a transition effect to the MUI Chip component to enhance user experience when the Delete Icon

When the delete icon appears, it is recommended that the overall width of the chip increases smoothly rather than instantly. Here is the current code structure: CSS: customChip: { "& svg": { position: "relative", display: &quo ...

cssreactjsmaterial-ui

Creating a case-insensitive path for pages in NextJS can be achieved by ensuring that all

I have a file named about.tsx under the pages folder. This means that the path for accessing the page is /about, allowing me to visit it through example.com/about. Strangely, attempting to access the same page via example.com/About results in a 404 error ...

javascriptreactjsnext.js

React js web application facing excessive content problem

I am encountering an overflow issue with the styles sheet I'm using on mobile and tablet views, but it works fine on desktop view. Can anyone provide a solution to this problem? I am developing a ReactJS web app hosted on Firebase. When I include fewe ...

javascriptcssreactjsoverflow

The 'npm start' command is failing to recognize the changes made to the

I am embarking on a new node application journey, starting with the package.json below, which is quite basic. { "name": "mynewnodeventure", "version": "1.0.1", "description": "Exploring node", "main": "index.js", "start": "node server. ...

javascriptnode.jsjson

Auto-complete feature not populating the input field in Google Chrome

Within my register form, I have various INPUT tags present. One of these INPUTs has the name email. <input type=text name=email id=email> When filling out this form in Chrome, I encounter a peculiar behavior. Upon clicking on the email input field ...

javascriptjquerygoogle-chrome

CSS: Adjusting font color for targeted disabled field elements

After researching various solutions, I came across a method to change the font color of all disabled fields by using the following code snippet: input[disabled=disabled] { /* your style */ color: #fff !important; } However, I have multiple disabled fie ...

htmlcssdisabled-input

What is the method for obtaining the viewModel in a Knockout component?

I need to prepopulate a knockout component when the document is ready. This is the code I have written: function Finding(id, trigger) { var self = this; self.id = ko.observable(id); self.trigger = ko.observable(trigger); } function FindingVi ...

javascriptajaxknockout.js

Having trouble configuring React-Router-Dom correctly

Hey there, I'm currently working on a project using react-router-dom. It seems like I may have missed a step in following the instructions because I'm encountering the following issues: bundle.js:1085 Warning: Failed prop type: The prop `history ...

javascriptreactjsreact-router-v4

Dynamically populating checkboxes and dynamically setting their checked state

I'm working with a for loop that dynamically generates 7 checkboxes in a row. Here's how it looks: @for (int i = 1; k < order.Rows.length; i++) { Row: @i <ul> @for (int j = 1; j < order.NumCheckboxes.length; j++) ...

javascriptc#jqueryasp.net-mvc

How to load a URL into a div using jQuery and then update the div with new content?

I have a codeigniter view that I want to load into a div as an iframe using the following code: <script type='text/javascript'> $(document).ready(function (){ $('#divId').load('http://www.domain.oo/page.php?test=1); }); ...

phpjqueryhtml

What causes the difference in behavior between absolute positioning in <button> and <div>?

I am noticing that the code below is not positioning my span to the top-left corner of the button as I expected. Can anyone explain why? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> &l ...

htmlcsscss-position

Tips for keeping the scrollbar permanently at the bottom in JavaScript?

I am trying to implement a feature where a div always scrolls down automatically. scrollDown(){ var chat = this.conversation; this.conversation.scrollTop = chat.scrollHeight; } checkKeyPress(e){ if (e.key == "Enter") { this.scrollDown(); .. ...

javascriptscroll

Creating a switch statement that evaluates the id of $(this) element as a case

I have a menu bar with blocks inside a div. I am looking to create a jQuery script that changes the class of surrounding blocks in the menu when hovering over a specific one. My idea is to use a switch statement that checks the ID of $(this) and then modif ...

javascriptjqueryhtmlcssswitch-statement

Lists are not limited to only <li> elements and elements that support scripts (<script> and <template>)

While testing my webpage's accessibility in Google Chrome Lighthouse, I encountered the following error. I am aware of the significance of properly structured lists in enhancing webpage accessibility. It is perplexing for me to receive this error desp ...

htmlangularaccessibilityhtml-lists