Member Avatar for patk570

Hey everyone, I have navbar from boostrap, I am trying to get the flags to append to the bottom/hang from the bottom of the nav on right side. to the site. The flags are just basic but i need to set the css style to "hang" from the navbar under the contact us section. Is there any way of doing this?

Thanks

  • 1 Contributor
  • 3 Replies
  • 240 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by patk570

Dani AI

Generated

A concise, more robust alternative to the fixed-position approach posted by (which used position:fixed and z-index:-1) is to anchor the icons to the navbar itself. Attaching the social container to the navbar avoids clickability and stacking-context problems, keeps the icons aligned when the navbar height or position changes, and makes responsive adjustments simpler.

Example structure and CSS (anchor the icons to the navbar and let them “hang” visually):

<nav class="navbar navbar-default">
  ...
  <div class="nav-social" role="navigation" aria-label="social links">
    <a href="#" aria-label="Facebook"><img src="icons/facebook.svg" alt="Facebook"></a>
    <a href="#" aria-label="Twitter"><img src="icons/twitter.svg" alt="Twitter"></a>
  </div>
</nav>
.navbar { position: relative; }

.nav-social {
  position: absolute;
  right: 12px;
  top: 100%;               /* start at the bottom edge of the navbar */
  transform: translateY(-35%); /* adjust how far it "hangs" */
  display: flex;
  gap: 8px;
  z-index: 1000;           /* above the navbar so links remain clickable */
}

.nav-social img { height: 30px; width: auto; display: block; }

@media (max-width: 768px) {
  .nav-social { display: none; } /* move icons into the collapsed menu on small screens */
}

Notes and troubleshooting: avoid negative z-index (it can place icons behind the page and make them unclickable); always use units (e.g., height:30px); watch for parent overflow: hidden or ancestor z-index creating stacking contexts; prefer SVGs or 2x assets for crisp icons on high‑DPI screens; and provide alt / aria-label for accessibility. If the navbar is sticky, anchor to the same element (or adjust top/transform) so the “hang” remains visually consistent.

Member Avatar for patk570

Here is what i have tried so far jsfiddle

Member Avatar for patk570

Here is what i have tried so far jsfiddle

Member Avatar for patk570

got it resolved:

<div class="socialfb">
    <a href="#" target="_blank"><img id="fbimg" src="./img/icons/facebook.png"></a>
</div>
<div class="socialtw">
    <a href="#" target="_blank"><img id="twimg" src="./img/icons/twitter.png"></a>
</div>

 .socialfb {
    top:51px;
    right:100px;
    height:30;
    width:30;
    background-repeat:no-repeat;
    position:fixed;
    z-index: -1;
}
.socialtw {
    top:51px;
    right:50px;
    height:30;
    width:30;
    background-repeat:no-repeat;
    position:fixed;
    z-index: -1;
}
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.