"Stylish symbols displayed atop the bootstrap navigation bar

Looking to add some icons (Facebook, Instagram, YouTube, WhatsApp) above my navbar elements. Here is an example of what I'm trying to achieve: https://i.sstatic.net/Ojio6.png

Below is the code I am currently using:

<nav class="navbar fixed-top navbar-expand-lg navbar-light navbar-custom">
      <a class="navbar-brand" href="http://localhost/wp/">
        <img src="http://localhost/wp/wp-content/uploads/2019/05/cropped-logo-1.png">         </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto"></ul>
        <ul id="menu-menu-principal" class="navbar-nav">
            <li id="menu-item-10" class="nav-item active"><a title="INICIO" class=" nav-link" href="#">INICIO</a></li>
            <li id="menu-item-12" class="nav-item"><a title="NOSOTROS" class=" nav-link" href="#">NOSOTROS</a></li>
            <li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19  nav-item"><a title="BLOG" class=" nav-link" href="#">BLOG</a></li>
            <li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20  nav-item"><a title="CONTACTO" class=" nav-link" href="#">CONTACTO</a></li>
        </ul>
    </div>
</nav>

If anyone has any advice or suggestions, please let me know!

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To achieve the desired effect of making the icon-bar above the navbar fixed, you need to follow a specific set of steps. First, remove the fixed-top class from the navbar element. This will prevent any overlap when applying position:fixed to the icon-bar.

Next, enclose both the navbar and icon-bar within a wrapper div and apply position: fixed styling to this wrapper instead. The rest is straightforward if you have a basic understanding of CSS.

If you find it challenging to implement these changes, refer to this code snippet on JSFiddle:

#top-wrapper {
    position: fixed;
    top: 0; left: 0; right: 0;
    background-color: green;
    z-index: 999;
}
#top-wrapper .icon-bar {
    width: 100%;
    overflow: auto;
}
#top-wrapper .icon-bar ul {
    float: right;
    list-style: none;
    margin: 0;
    padding: 16px 16px 16px 0;
}
#top-wrapper .icon-bar ul li {
    float: left;
    padding: 0 16px;
    border-right: 1px dotted #fff;
}
#top-wrapper .icon-bar ul li:last-child {
    border: none;
}
#top-wrapper ul li i {
    color: #FFF;
    font-size: 14px;
}

.section {
    height: 100vh;
    background-color: grey;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="top-wrapper"> <!-- This is our wrapper div -->
  <div class="icon-bar">
    <ul>
      <li><a href="#"><i class="fa fa-facebook"></i></a></li>
      <li><a href="#"><i class="fa fa-instagram"></i></a></li>
      <li><a href="#"><i class="fa fa-youtube-play"></i></a></li>
      <li><a href="#"><i class="fa fa-whatsapp"></i></a></li>
    </ul>
  </div>
  <nav class="navbar navbar-expand-lg navbar-light navbar-custom">
    <a class="navbar-brand" href="http://localhost/wp/">
      <img src="http://localhost/wp/wp-content/uploads/2019/05/cropped-logo-1.png"> </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto"></ul>
      <ul id="menu-menu-principal" class="navbar-nav">
        <li id="menu-item-10" class="nav-item active"><a title="INICIO" class=" nav-link" href="#">INICIO</a>
        </li>
        <li id="menu-item-12" class="nav-item"><a title="NOSOTROS" class=" nav-link" href="#">NOSOTROS</a>
        </li>
        <li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19  nav-item"><a title="BLOG" class=" nav-link" href="#">BLOG</a></li>
        <li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20  nav-item"><a title="CONTACTO" class=" nav-link" href="#">CONTACTO</a></li>
      </ul>
    </div>
  </nav>
</div>

<div class="section">Hello world</div>
<div class="section">Hello world</div>
<div class="section">Hello world</div>

Answer №2

To start using Font Awesome, you must first load the library and then incorporate it into your project. To better understand how to use Font Awesome, check out these helpful resources below:

Introduction to Font Awesome

Brand Icons Overview

Instagram Icon Example

Feel free to test this code snippet in your project environment.

Ensure that you have successfully loaded Font Awesome before implementing the following code:

  <nav class="navbar fixed-top navbar-expand-lg navbar-light navbar-custom">

  <div class="social">  

    <a href="#"><i class='fab fa-instagram' style='font-size:24px'></i> </a>
  <a href="#"> <i class='fab fa-facebook' style='font-size:24px'></i></a>
  <a href="#"><i class='fab fa-twitter' style='font-size:24px'></i></a>
  <a href="#"><i class='fab fa-linkedin' style='font-size:24px'></i></a>
    <a href="#"><i class='fab fa-pinterest' style='font-size:24px'></i></a> 

  </div>

  <div class="menu">  

      <a class="navbar-brand" href="http://localhost/wp/">
        <img src="http://localhost/wp/wp-content/uploads/2019/05/cropped-logo-1.png">         </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto"></ul>
        <ul id="menu-menu-principal" class="navbar-nav">
            <li id="menu-item-10" class="nav-item active"><a title="HOME" class=" nav-link" href="#">HOME</a></li>
            <li id="menu-item-12" class="nav-item"><a title="ABOUT US" class=" nav-link" href="#">ABOUT US</a></li>
            <li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19  nav-item"><a title="BLOG" class=" nav-link" href="#">BLOG</a></li>
            <li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20  nav-item"><a title="CONTACT" class=" nav-link" href="#">CONTACT</a></li>
        </ul>
    </div>

 </div>
</nav>

Answer №3

Your answer is here! It seems like you're working with WordPress based on your code.

1) First, download and enable the Better Font Awesome plugin - https://wordpress.org/plugins/better-font-awesome/

2) Insert the code snippet below:
Note: The aria-labels included in the code are beneficial for screen readers such as VoiceOver on a Mac (check out this demo video: https://www.youtube.com/watch?v=5R-6WvAihms). Screen reader software will announce "Facebook link" or "WhatsApp link," helping visually impaired users identify clickable links.

<a href="https://www.facebook.com/" target="_blank" aria-label="Facebook">
    <i class="fab fa-facebook-square"></i>
</a>
<a href="https://www.whatsapp.com/" target="_blank" aria-label="WhatsApp">
    <i class="fab fa-whatsapp"></i>
</a>
etc.

3) Explore more Font Awesome icons at https://fontawesome.com/icons?d=gallery

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

disabling responsiveness in Bootstrap 2

I am facing an issue with Bootstrap version 2 where I am unable to fix the grid layout. Even after wrapping all my HTML elements in a container, the layout still behaves unpredictably on different screen sizes. Here is a snippet of my code: <header> ...

htmlcsstwitter-bootstrap

5-item carousel in CSS gridView

I'm currently working on a thumbnail slider project. My goal is to display 5 thumbnails at a time, and allow users to move to the next or previous set of thumbnails by clicking on the corresponding buttons. I attempted to modify an existing slider tha ...

javascriptcssslider

Cursor disabling effect in IE 11 causing interference with drop-down options on Twitter Bootstrap 3

Right above a disabled twitter bootstrap 'form-control' input element sits a drop-down list. <div> <select> <option> Option 1 </option> <option> Option 2 </option> <option> Op ...

htmlcsstwitter-bootstrapinternet-explorer

The right margin is left untouched by Bootstrap

I have been working on code using Bootstrap and added the class "m-0", but I am still seeing margin on the right side of the element. Here is the code snippet: <html lang="en"> <head> <meta charset="UTF-8"> &l ...

htmlbootstrap-5

Guide to configuring a bootstrap checkbox using the razor CheckBoxFor() method

Struggling to implement Bootstrap styled checkboxes in my ASP .NET MVC form. Despite hours of searching for a solution, I have yet to find one that works for me. Below is my HTML razor code, but the checkbox is not displaying. <div cl ...

htmlasp.netasp.net-mvctwitter-bootstraprazor

Click the button to add content to the top section of the div using jQuery

Looking for some assistance with a web development issue I'm facing. Here's the scenario: I have two sections on my webpage - TOP and BOTTOM. In the bottom section, there are 3 list records each with a checkbox and button. What I need help with ...

javascriptjqueryhtmlcss

Using jQuery to append content with a variable as the source

Recently delving into jQuery and encountering an issue with getting my variable inside src when using append. Either it's not functional at all, or just displaying the variable name in string form in the console. Here is the code causing trouble: va ...

javascriptjqueryhtml

Adjusting the spacing of the first letter using CSS, leave room

I'm encountering issues with the alignment of titles and text using the 'Lato' Google font. It seems like there is a space or kerning issue on the first letter causing them not to align properly to the left. Any suggestions on how to fix thi ...

htmlcssfontswebfonts

Creating multiple "read more" and "read less" buttons on a single webpage

Can you figure out what's going wrong here? I assigned each one a separate ID, but it's still not functioning properly in my code. I need to get this fixed for an assignment that's due in a few days, so any help is appreciated! function r ...

javascripthtmlcssarrays

What steps can I take to avoid MathJax equations overlapping with dropdown menus in Bootstrap version 5.2?

Currently, I am in the process of developing a website utilizing Bootstrap 5.2 which features MathJax equations and dropdown menus integrated into the navbar. However, there is an issue where the MathJax equations are overlapping with the dropdown menus, c ...

htmlnavbarbootstrap-5mathjax

The HTML input element does not comply with the specified pattern

My current struggle lies in validating the input field for a "Phone Number". Despite creating a regex pattern that demands 10 numbers, I still encounter the error message: "Please match the requested format". I am puzzled as to why this is happening, even ...

htmlformsvalidationinput

Loading an empty CSS file in Node.js

Just starting out with node.js, and I could really use some help with a small css and image issue that I'm facing. I've streamlined my html and .js for clarity. Despite trying everything, the css and image just won't load. My form and server ...

javascripthtmlcssnode.js

Revamp the current webpage to display attribute values in textual format

As I peruse a webpage, I notice that there is room for improvement in terms of user-friendliness. The page is filled with a list of movie titles, each accompanied by a link to IMDb. However, the IMDB user rating is only visible when hovering over the titl ...

javascripthtmlcssattributesstylebot

Style the ul and li elements inside a div using CSS

Is there a way to specifically target the <ul> and <li> elements within a designated <div>, rather than applying styles globally? Here is an example of the HTML structure: <div id="navbar_div"> <ul> <li>< ...

htmlcsshtml-lists

What is the best way to include default text in my HTML input text field?

Is it possible to include uneditable default text within an HTML input field? https://i.stack.imgur.com/eklro.png Below is the current snippet of my HTML code: <input type="text" class="form-control input-sm" name="guardian_officeno" placeholder="Off ...

javascripthtmlcss

Displaying JSON keys and values individually on an HTML page

Looking to display a JSON array in HTML using ngFor TypeScript : import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-ng-for', templateUrl: './ng-for.component.html', styleUrls: ['./ng-for ...

javascripthtmlangular

Interested in transferring an additional column value to the $scope.seriesSelected variable?

I've been delving into Timeline charts using the angularjs google chart API and have come across an interesting limitation. It seems that only 4 columns are allowed, with the extra column designated for tooltips. However, I have a specific requirement ...

javascripthtmlangularjs

CSS: Adjusting alignment differences between local host and server

I've been working on a webpage with rotating background images, and everything looked perfect on my localhost. But once I uploaded it to the server and viewed it in different browsers, some of the people in the images were not positioned as intended, ...

css

Options for regular expressions in CSS: match letters regardless of case and search for all occurrences

Here is the HTML I am working with: <div> <img class="hi" src="http://i.imgur.com/f9WGFLj.png"></img> <img class="HI" src="http://i.imgur.com/f9WGFLj.png"></img> </div> Additionally, I have the following CSS co ...

htmlcssregexflags

Stop storing CSS data for nopCommerce

Currently, I am looking for a method to avoid caching CSS files on my nopCommerce website. In the past, I have achieved this by adding the date and another element at the end of the CSS call. Html.AppendCssFileParts("~/Themes/CustomTheme/Content/css/site. ...

htmlcssasp.netcachingnopcommerce