Social media icons condensed into a single line within a compact menu

I have come across a problem that I can't seem to solve. How can I display social icons in one line within a collapsed menu? I added the following code to my CSS file but nothing seems to have changed. Any suggestions or ideas would be greatly appreciated.

.navbar-right li {
    display: inline-block;
}

Below is an excerpt from my navbar code:

<head runat="server">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.0/js.cookie.js" type="text/javascript"></script>
</head>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light style="background-color: #ffffff;">
<div class="d-flex flex-grow-1">
<span class="w-100 d-lg-none d-block"></span>
<a class="navbar-brand d-none d-lg-inline-block" href="https://testsite.com">
<img src="images/logo.png" height="150" dir="ltr" alt="logo">

</a>
<a class="navbar-brand-two mx-auto d-lg-none d-inline-block" href="https://testsite.com">
<img src="images/logo.png" height="100" alt="logo">
</a>
<div class="w-100 text-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="collapse navbar-collapse flex-grow-1 text-center" id="myNavbar">
<ul class="navbar-nav ml-auto flex-nowrap">
<li class="nav-item">
<a href="https://testsite.com" class="nav-link m-2 menu-item">Home</a>
</li>
<li class="nav-item">
<a href="https://testsite.com/about" class="nav-link m-2 menu-item">About</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://www.facebook.com/" target="_blank" class="nav-link"><i class="fa fa-facebook fa-lg"></i></a></li>
<li><a href="https://www.instagram.com/" target="_blank" class="nav-link"><i class="fa fa-instagram fa-lg"></i></a></li>
<li><a href="https://twitter.com/" target="_blank" class="nav-link"><i class="fa fa-twitter fa-lg"></i></a></li></ul>
</div>
</div>
</nav>

htmlcssbootstrap-4navbar

Answer №1

To style your social icons within the ul tag with class navbar-nav navbar-right, simply add the bootstrap class names d-inline-flex flex-row. Your updated code will look like this:

<ul class="nav navbar-nav navbar-right d-inline-flex flex-row">
    <li><a href="https://www.facebook.com/" target="_blank" class="nav-link"><i class="fa fa-facebook fa-lg"></i></a></li>
    <li><a href="https://www.instagram.com/" target="_blank" class="nav-link"><i class="fa fa-instagram fa-lg"></i></a></li>
    <li><a href="https://twitter.com/" target="_blank" class="nav-link"><i class="fa fa-twitter fa-lg"></i></a></li></ul>

If you want to limit the width, consider using d-sm-inline-flex or d-lg-flex.

Alternatively, you can apply custom CSS by adding display : inline-flex; and flex-direction: row; to your ul as shown below:

.navbar-right {
   display: inline-flex;
   flex-direction: row;
}

Answer №2

I am happy to tackle this within your CSS style

.navbar-right li {
    display: flex;
    flex-direction: row;
}

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

Creating an arrow icon alongside a pseudo:hover::before element

This is my custom code snippet: .privacycheck1 { position: relative; top: 265px; background-color: #CF0000; width: 24px; height: 24px; left: 843px; border-radius: 50px; border: 5px #E60000; } .privacycheck1::before { position: relative ...

htmlcsscss-shapes

Issue with Bootstrap 4.2 modal: Unable to edit input fields, button cannot be clicked, modal does not close

https://i.sstatic.net/vHnVG.png https://i.sstatic.net/MhU3f.png Utilizing Bootstrap 4.2.1, I have a modal that opens via a specific link: <a href="#" data-toggle="modal" data-target="#inviteByEmailPopup" data-backdrop="false" data-keyboard="false"> ...

javascriptjqueryhtmlcsstwitter-bootstrap

Manipulate Input Classes by Adding and Removing Them

I am currently using masked JS in some input fields, specifically for telephone numbers. However, I am facing an issue where phone numbers can vary in length, either 10 or 11 digits. I need to switch the class based on whether a checkbox is checked. Here i ...

javascriptjqueryhtml

Stop automatic resizing on mobile device after postback

Encountered an issue with a website I'm currently developing. It's not causing any problems, but I want to enhance the user experience. My aim is to maintain the zoom levels of mobile devices after a postback. To provide more context, there is a ...

javascriptandroidhtmlasp.net

Tips for adjusting the animation position in Off-Canvas Menu Effects

I am currently utilizing the wave menu effect from OffCanvasMenuEffects. You can view this menu in action below: ... // CSS code snippets here <link rel="stylesheet" type="text/css" href="https://tympanus.net/Development/OffCanvasMenuEffects/fonts/f ...

javascriptjquerycsssvg

Applying CSS to replicate the vintage iPhone app icon design

I've been searching online for days, but I can't seem to find any helpful resources on how to use CSS3 to style the old iPhone app icon. My goal is to apply a CSS3 style to this curved line, with a fallback option in case older browsers don&apos ...

htmlcsscss-shapes

Ensuring complete height and width with no scrollbar in a Material UI React application

I'm attempting to create a page that fills the entire height of the screen without adding an undesirable scrollbar. When I say 100% height, I mean it should just fit the size of the screen. Here is a demonstration of the issue. The yellow highlighted ...

htmlcssreactjsmaterial-ui

Encountering difficulty selecting a dropdown option within a group of multiple options due to an issue where the element

I am experiencing an issue when trying to select a dropdown from a group of multiple elements, as one specific dropdown cannot be selected. The error message I receive is: => {"message":"unknown error: Element ... is not clickable at point (433, 15). Ot ...

javahtmlseleniumxpath

Navigating jQuery Tabs by Linking to a Specific Tab in a Separate File

I am currently using Bootstrap 3 to develop a basic website. On the about.html page, I have set up Tabs with various content. <ul class="nav nav-tabs" id="TabSomos"> <li class="active"><a href="#somos" data-toggle="tab">About Us</a> ...

javascriptjqueryhtmltwitter-bootstraptabs

Modify the default navbar from Bootstrap to display as a fixed navbar

Is there a way to change my default navbar into a fixed navbar when I scroll? I have tried adding data-spy="affix" data-offset-top="200", which works but doesn't look quite right. Should I create a new CSS class or is there an easier solution availab ...

jqueryhtmlcsstwitter-bootstrap

Having trouble displaying json data in an HTML file with d3.js

I am having trouble loading data from a json file into an HTML file and using D3 to visualize it. Even though the file loads correctly and is verified with a 200 status, the contents are interpreted as null. Below are the contents of the json file: [{"to ...

javascripthtmljsond3.jsbubble-chart

Is it possible to have Mobile WebKit store the click position?

I am in the process of developing a unique framework specifically designed for WebKit devices. One of the features I have implemented is a series of list views that activate a 'hover' class when users touch them. Below is the jQuery/JavaScript co ...

javascriptjqueryiphonecssmobile-webkit

Discover the complete compilation of CSS class regulations (derived from various stylesheets) along with their currently active properties for the chosen element

Is there a way to retrieve all the matched CSS Selectors for a selected element and access the properties of each active class applied to that element? I have researched methods like using getMatchedCSSRules and checking out However, I am hesitant to use ...

javascriptjqueryhtmlcss

Highlighted top and bottom borders accenting a vertical list

I am working on a list that contains four items. Each item should have top and bottom borders set to 1px solid grey by default. There is a JavaScript rotator in place that adds a 'highlighted' class to the selected list element, which should have ...

jqueryhtmlcss

Creating a responsive navigation menu using Bootstrap 4 by merging data from various MySQL tables

I am struggling to create a bootstrap 4 nav-menu using the provided SQL query and code snippets. Below are the tables: TABLE menu -------------------------------------- | id | title | url | | 1 | Home | index.php | | 2 | M ...

phpcssmysqlbootstrap-4navbar

How can I align a single button to the left side while positioning the rest of the elements to the right in Bootstrap 4?

I am attempting to align the B1 button on the left side and have the remaining elements positioned on the right side. Below is my code snippet using Bootstrap 4.1: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/b ...

csstwitter-bootstrapbootstrap-4

Which is more recommended to use in AJAX (XMLHttpRequest) - eventListener or readyStateChange method?

As I revisited a video from WWDC12 discussing advanced effects with HTML5, I couldn't help but notice that for the demo they utilized req.addEventListener("load",callback,true) instead of the usual onreadystatechange. This made me wonder: what differ ...

javascriptajaxhtml

Struggling with React integration of AdminLTE3 sidebar treeview?

I have a requirement to create a React sidebar with a category 'Staff' that, when clicked, reveals three subordinate categories. Below is the code snippet: import React, { Component } from "react"; export default class Sidebar extends Componen ...

javascripthtmlreactjsbootstrap-4adminlte

Bootstrap Toggle appears on screens of medium size

While working on creating a responsive dashboard with Bootstrap 4.3, I encountered an issue specifically with medium screens. Upon resizing Google Chrome to test the page at various sizes, I noticed that the bootstrap toggle button would unexpectedly appea ...

cssbootstrap-4toggle

Implementing websocket functionality in Yii framework

I am currently working on integrating websocket functionality into my web application using PHP and as an extension for Yii. This will allow me to create a notification system similar to what I have in mind. My starting point is the code available at the ...

phphtmlyiiwebsocketyii-extensions