Member Avatar for suavedesign

I am trying to st my nav bar so that if one tab is removed, the rest of the tabs will just enlarge, and continue to take up the full nav bar width. How can I do that?

  • 2 Contributors
  • 3 Replies
  • 120 Views
  • 5 Hours Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

A simple, reliable approach is to make the nav a flex container so remaining tabs automatically grow to fill the bar when one is removed. That accomplishes the "100% / count" idea mentioned without manual calculations, and it makes the layout responsive across widths. See the official Flexbox docs for details: MDN - Flexbox basics and a practical guide at CSS-Tricks.

Example (structure kept minimal):

<nav id="topnav">
  <ul class="nav">
    <li class="nav-item"><a href="/profile">Profile</a></li>
    <li class="nav-item"><a href="/teams">Teams</a></li>
    <li class="nav-item nav-fixed"><a href="/feedback">Send Us Feedback</a></li>
  </ul>
</nav>
.nav { display:flex; margin:0; padding:0; list-style:none; align-items:center; }
.nav-item { flex:1 1 0; box-sizing:border-box; }
.nav-item a { display:block; text-align:center; padding:0.75rem 1rem; }
.nav-item.nav-fixed { flex:0 0 180px; /* fixed slot for feedback tab */ }

Notes and troubleshooting:

  • Use box-sizing:border-box so padding does not inflate computed widths.
  • Remove floats/inline-block rules from the items; flex handles layout.
  • If one tab must stay a fixed width (the “Send Us Feedback” item in the thread), give it flex:0 0 <px> and let the rest use flex:1.
  • For very old browser support, a percentage-width fallback (or CSS table-cell) can be used, or a tiny script that counts visible LIs and sets a CSS custom property for calc(100% / var(--count)).
  • Ensure anchors are display:block so the whole tile is clickable; add aria-current="page" on the active link for accessibility.

This keeps the nav adaptive: removing an LI causes the remaining flex items to reflow and evenly share the available space without manual width math.

Recommended Answers

All 3 Replies

Member Avatar for almostbob

<humor>
well If I pull the code you used out of my .behind., it would hurt
could you post your code and save my butt from the sharp edges,
</humor>
<serious>
please post the code for the css menu,
</serious>
and likely somebody will be able to point out the changes

Edited by almostbob
Member Avatar for suavedesign

HTML

<div id="topnav">
<ul>
<li><a href="<?php echo $siteurl; ?>myprofile" <?php if ($section == 'myprofile') { echo 'class="lion"' ; } ?>>My Profile</a></li>
<li><a href="<?php echo $siteurl; ?>teams" <?php if ($section == 'teams') { echo 'class="lion"' ; } ?>>Family Teams</a></li>
<li><a href="<?php echo $siteurl; ?>mt-tellafriend" <?php if ($section == 'fundraising') { echo 'class="lion"' ; } ?>>Fundraising</a></li>
<li><a href="<?php echo $siteurl; ?>mt-training" <?php if ($section == 'training') { echo 'class="lion"' ; } ?>>Training</a></li>
<li><a href="<?php echo $siteurl; ?>mt-recommit" <?php if ($section == 'recommitment') { echo 'class="lion"' ; } ?>>Recommitment</a></li>
<li><a href="<?php echo $siteurl; ?>forum" <?php if ($section == 'forum') { echo 'class="lion"' ; } ?>>Forum</a></li>
<li class="last"><a href="<?php echo $siteurl; ?>info" class="feedback">Send Us Feedback</a></li>
<div class="clear"></div>
</ul>
</div>

CSS

#pages.profile.letters #topnav{
    margin:-195px 0  0 -49px;
    width:1040px;
}

#pages.profile.letters #topnav li{
    display:inline;
    float:left;
    list-style-type:none;
    background:#2765ae;
    /*padding:50px 0px 50px 0px;*/
    padding:50px 25px;
    margin:0 1px 0 0;
    text-transform:uppercase;
    font-family: 'gothambook';
    /*width:100%;*/
    text-align:center;
}

#pages.profile.letters #topnav li.last{
    margin:0px;
    background:#000000;
    font-size:28px;
    font-family: 'bebasneue';
    padding:41px 16px 41px 16px;
    /*width:20.8%;*/
}

#pages.profile.letters #topnav li:hover{
    background:#ffc90d;
}

#pages.profile.letters #topnav li:hover a{
    color:#2765ae;
}

#pages.profile.letters #topnav li a{
    color:#FFFFFF;
    text-decoration:none;
}
Member Avatar for almostbob

ps,
'somebody' <> me,
able to determine what the guru may need,
css is not my forte
something along the lines of width=100%/(count li) ??

Edited by almostbob
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.