What steps should I take to ensure my navigation bar occupies the full width of the div container?

UPDATE: I was able to find a solution using flex! However, the links are still not fully extending across the entire top row:

see image description here

There is some excess space on the right and left sides. Is there a way to make the flex utilize all available space?

I want the navigation bar to automatically adjust its width based on the number of links present.

.top-container {
  text-align: center;
  display: flex;
}

.top-content-box {
  width: 90%;
  height: 30%;
  margin: 30px auto;
  background: #fff;
  box-shadow: 0px 0px 10px #000;
  justify-content: center;
  display: flex;
  flex-direction: column;
}

.news-and-twitter {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}

.twitter-min {
  width: 300px;
}

.news-box {
  text-align: left;
  vertical-align: middle;
  padding: 30px;
  flex-grow: 2;
}

.nav-bar {
  text-align: center;
  flex-grow: 1;
}

ul.link-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: inline-block;
}
<div class="top-container">

  <div class="top-content-box">

    <div class="nav-bar">
      <ul class="link-list">
        <li class="link-list"><a class="nav-list" href="default.asp">home</a></li>
        <li class="link-list"><a class="nav-list" href="news.asp">about</a></li>
        <li class="link-list"><a class="nav-list" href="contact.asp">projects</a></li>
        <li class="link-list"><a class="nav-list" href="about.asp">portfolio</a></li>
        <li class="link-list"><a class="nav-list" href="about.asp">commissions</a></li>
        <li class="link-list"><a class="nav-list" href="about.asp">patreon</a></li>
      </ul>
    </div>
    <div class="news-and-twitter">
      <div class="news-box">
        <h1>current project</h1>
        Arena Circus ch 4 | Inserting voices into The Pretenders Guild
        <h1>Current Events</h1>
        <ul>
          <li>The Pretenders Guild voice update is coming 7/15/19!
          </li>
          <li>Check the 1 year anniversary <a href="https://www.patreon.com/posts/1-year-special-28267096">special offer</a> here!</li>
        </ul>
      </div>
      <div class="twitter-min">
        <a class="twitter-timeline" data-width="300" data-height="450" data-theme="light" data-link-color="#343584" href="https://twitter.com/CapMinyan?ref_src=twsrc%5Etfw">Tweets by CapMinyan</a>
        <script async src="https://platform.twitter.com/widgets.js"
          charset="utf-8"></script>
      </div>
    </div>
  </div>
</div>

view screenshot

htmlcssweb

Answer №1

To create a responsive layout, ensure the parent element of the list (ul.link-list) is styled with flex properties and set the children (li.link-list) to have a flex-grow value of 1

.top-container{
    text-align:center;
}
.top-content-box {
    width: 90%;
    height:30%;
    margin:30px auto;
    background: #fff;
    box-shadow: 0px 0px 10px #000;  
}

.news-and-twitter{
    display:flex;
    flex-direction:row;
    flex-grow:1;
}

.twitter-min{
    width:300px;
}

.news-box{
    text-align:left;
    vertical-align: middle;
    padding:30px;
    flex-grow:2;
}

Answer №2

Instead of using "flex box", I prefer different methods!

One suggestion is to position the nav bar at left:50%;

Then give it a margin of margin-left: -100px, adjusting the value to half of the nav's width, for example if it's 526px, set it to -263px.

The width might change depending on the screen size, so adding some JavaScript to adjust it dynamically upon page load could be helpful - calculating the width of the nav and halving it with a "-" in front and "px" after...

I know it may seem complicated for a simple task, but I enjoy using JavaScript for my tasks.

Some may argue that less JavaScript is better, but I believe otherwise despite the impact on page speed and other factors...

Alternatively, using margin: 0 auto could potentially solve the issue as well.

I hope this suggestion proves useful!

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

Django Ajax button fails to add item on initial click

My Django project features a dynamically rendered table for order items on the Cart page. Each item in the table displays the quantity, product name, total price, and more. To modify the quantity, I've implemented "add" and "subtract" buttons. Below i ...

pythonhtmljquerydjangoajax

Can you provide guidance on how to prioritize container div style over CSS class?

Here's the HTML code snippet I'm working with: <html> <head> <style> .text-box { color: red; } </style> </head> <body> <p class=&qu ...

htmlcss

How can you use Dart to uncover the content within an H1 element on an HTML webpage?

I'm currently self-teaching mobile development with Dart and Flutter, and my current project involves connecting a mobile app to a website. I want to extract the text from an H1 tag that is loaded through JavaScript on the website and display it in th ...

javascripthtmldartmobile-application

The setInterval function does not function properly in IE8 when set to 0

I have a function called changeColor that updates the styling of certain elements in my HTML. In order to apply this function, I am using a timer like so: var timer = setInterval(changeColor,0); The issue I am encountering is that setting the time interv ...

javascripthtmlcssinternet-explorer-8

What is the best method to bring in an HTML list into R programming?

I am trying to import a comprehensive list of banks in Cambodia, including their homepage, address, and other details into R. Although I have attempted the code below, it is not working: url <- "https://www.abc.org.kh/member-list/" html <- ...

htmlrimport

Adjust the section and aside elements to automatically expand when used within the main tag

Is there a way to ensure that the inner-section and sidebar have a minimum height, while also expanding vertically along with the main tag? Here is an example of the HTML code: <body> <header></header> <main> <s ...

htmlcss

Tips for creating content surrounding the JSP output: What to include before and after the JSP results

My goal is to enhance the functionality of my JPSs that represent Components. I am seeking a way for these component JSPs to generate HTML before and after their main content is executed. In the current example, we have a file named component.jsp with the ...

javahtmljspservlets

Modifying the color of a GIF animated image using CSS

I'm currently working on an Angular application and I have a transparent GIF Loader image that I downloaded. I've been trying to figure out how to change the color of the GIF image, but so far, I've only been successful in resizing it. I sea ...

htmlcssangular

Differences in scope variables between Angular 1 and Angular 2

When working with scope.$on, scope.$watch, scope.$broadcast, $scope.$apply, $scope.$emit, etc, in Angular 1, I found that these properties are not valid in Angular 2. Can anyone recommend alternative methods for achieving similar functionality in Angular ...

javascriptangularjshtmlangulartypescript

What is the best way to position images and text on a webpage using CSS?

Is there a way to properly align images and text in my code? Below is the code I am currently using. Any suggestions on how to achieve the alignment? <ul> <li> <a href=""><i class="icon-profile"></i> </a> < ...

htmlcss

Using ngStyle in AngularJS to dynamically adjust styling based on variable values

I am looking to create a progress bar using the uikit framework. The documentation states that it can be done like this: <div class="uk-progress"> <div class="uk-progress-bar" style="width: 40%;">40%</div> </div> However, this ...

javascriptcssangularjsuikitprogress-bar

Tips for dynamically altering div background colors based on user interactions?

Assume I have the code snippet below: <body> <div class = "header">Header content</div> <div class = "content">content</div> </body> Is there a way to hide the header div as the user scrolls down on the website, and ...

javascriptjqueryhtmlcss

What can I do to stop hidden HTML tags from loading on my page? Is it possible to completely remove them from the page

I previously inquired about this question but did not receive a satisfactory answer. Here are the input fields I am working with: <form method ="post" action="select.php"> <input id="nol" style="width: 350px;" type="text" name="searchdisease" pl ...

phpjqueryhtml

Django: Utilizing Multiple IDs in URL Parameters

Greetings, I am currently facing an issue where I'm attempting to redirect the user back to the HTML file. However, after implementing the code snippet below in my view function: def delete_topic(request, topic_id): """ Delete Topic """ topic ...

pythonhtmldjango

Concealing a Specific Element with Text using jQuery

Is there a way to conceal the section that includes the element labeled as "Product Tags" on a webpage? ...

javascriptjqueryhtmlcss

Tips for hiding text on hover effect

I'm currently working on a menu where each item displays text that is replaced by an email address on hover. However, I am struggling to remove the text during the hover state. Below is the code I have written so far: #home { font: 30px 'Le ...

cssvisibilityhiddenfont-size

How can you easily ensure your React web app is responsive?

As I delve into building a web app using reactjs, one particular challenge I encounter is ensuring its responsiveness. An issue arises when the browser size changes, causing my components to overlap and lose alignment. Is there an easy solution to preven ...

cssreactjsresponsive-design

shifting the angular directives to alternate the bootstrap class of hyperlinks

I have a collection of hyperlinks displayed on my webpage. <a href="#" class="list-group-item list-group-item-action active" routerLink='/route1' >Explore First Link</a> <a href="#" class="list-group-item list-group-item-action" r ...

htmlangularclasshyperlinkbootstrap-4

Is there a way to avoid creating extra <td>s by placing form end tags inside a table?

I am currently working with Rails version 2.3.5. One thing that I have never attempted is putting two forms inside a single table or inserting a form end tag within a table. I searched Google for information on this but couldn't find much, so I thoug ...

htmlruby-on-rails

What is the correct way to accurately determine the width of a block being displayed with the flex-direction:column property?

For instance: HTML console.log($('.container').width()); // 600px as we defined in css. console.log($('.list').width()); // 600px console.log($('.box').eq('-1').position().left + $('.box').outerWidth( ...

javascriptcssflexbox