How to position two Bootstrap 4 Navbars side by side

I'm currently experiencing an alignment issue with two stacked navbars in my code. I want to align the upper navbar with the lower one, but I've tried various approaches without much success. Is there a problem with the buttons or something else that's causing this misalignment? Any assistance would be greatly appreciated! 

<nav class="navbar navbar-expand-md">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a href="#">
                        <img src="F:/Theme Development/New folder/facebook.png" style="margin-right:2rem;vertical-align:text-top;height:55px;" />
                    </a>
                </li>

                <li class="nav-item">
                    <a href="#">
                        <img src="F:/Theme Development/New folder/instagram.png" style="margin-right:2rem;vertical-align:text-top;height:55px;" />
                    </a>
                </li>

                <li class="nav-item">
                    <a href="#">
                        <img src="F:/Theme Development/New folder/linkdin.png" style="margin-right:2rem;vertical-align:text-top;height:55px;" />
                    </a>
                </li>

                <li class="nav-item ">
                    <a href="#">
                        <img src="F:/Theme Development/New folder/twitter.png" style="margin-right:2rem;vertical-align:text-top;height:55px;" />
                    </a>
                </li>


                <li class="nav-item">
                    <a class="btn btn-primary" style="background-color: #685dadfa;border:0px;border-radius:0px;font-size:30px;font-family: inherit"
                        href="#">
                        <img src="F:/Theme Development/New folder/lock1.png" style="vertical-align:sub" /> REGISTER</a>
                </li>
                <li class="nav-item">
                    <a class="btn btn-primary" style="margin-left:1rem;background-color: #179c95;border:0px;border-radius:0px;font-size:30px;font-family: inherit"
                        href="#">
                        <img src="F:/Theme Development/New folder/sign_in.png" style="vertical-align:sub;" /> LOG IN</a>
                </li>
            </ul>
        </div>
    </nav>

    <nav class="navbar navbar-expand-md navbar-light" style="background-color:white">

        <a class="navbar-brand mb-0 h1" style="font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif" href="#">Website Logo</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 ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Home
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Post a Job</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Post Resume</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Blog</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact Us</a>
                </li>
            </ul>
        </div>
        </div>
        <!--/div-->
    </nav>
htmlcsstwitter-bootstrap

Answer №1

Check out the padding around the <a> tags, highlighted in green in the image below:

To ensure the "Contact Us" text aligns with the "Log in" button on the right side, simply include padding-right: 0; in the style of the <a> for "Contact Us"

            <li class="nav-item">
                <a class="nav-link" href="#" style="padding-right:0;">Contact Us</a>
            </li>

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

Eliminating duplicate data submissions with jQuery Ajax

Encountering an issue with my jQuery AJAX submission process. JavaScript: $('#myform').submit(function () { if (validateEvenInputs()) { $('#btnevent').attr('disabled', 'disabled'); function ...

phpjavascriptjqueryhtmlajax

Is it possible to modify the size of a bullet image in Javascript?

Can an image bullet style loaded via a URL be resized using JavaScript code like this: var listItem = document.createElement('li'); listItem.style.listStyleImage = "url(some url)"; listItem.style.listStylePosition = "inside"; I aim to increase ...

javascriptcss

Utilizing Ember to transmit models to Bootstrap Popovers

Seeking assistance from anyone familiar with utilizing Bootstrap for Ember components to help resolve an issue. I am trying to understand how to pass a model to the component when using {{bs-bind-popover}} <div {{bs-bind-popover templPop}}>Show pop ...

javascripttwitter-bootstrapember.js

Is there a way to keep a div element anchored at the top of the page until I reach the bottom and then have it stick to the bottom as I continue

I have a question that I hope is clear enough! On my webpage, there is a div at the top that I want to move to the bottom when I scroll and reach the end of the page. Hopefully, you understand what I'm trying to achieve! If anyone has any ideas, I&ap ...

javascriptjqueryhtmlcsstwitter-bootstrap

In PHP, how to arrange list items in columns underneath the corresponding title characters

In the PHP code snippet below, Line B is used to count the title characters while grouping array results alphabetically. Line A outputs 4. DEMO PHP code: <?php $beta_lists = array ( 'Àpple' => 'http://www.abc.mno/apple/', ...

phphtmlhtml-lists

Unusual behavior observed while looping through an HTMLCollection returned by the getElementsByClassName method

After spending some time debugging, I discovered an issue with my function that changes the class of elements to modify their properties. Surprisingly, only specific elements were being affected by this change. It took me a while to troubleshoot and resolv ...

javascripthtmlgetelementsbyclassnamehtmlcollection

The 'in' operator cannot be used in Jquery to search for 'display' in a value that is undefined

This is the HTML code snippet I have: <div class="V_CPp Elss <?php echo $Show; ?>"> <span class="ViewC">View more comments</span> </div> <di ...

jqueryhtml

Search for "conditions" in a basic HTML DOM parser

I encountered an issue when trying to parse information from a website using simple HTML DOM parser. My code looks something like this: <li> <p class="x"></p><p>..</p> <p>..</p> <p>..</p> <p class ...

phphtmlparsingdom

Creating stylistic layouts for text using CSS

After spending the last hour designing a web page, I am stuck on a particular issue that I just can't seem to solve. I need to write several paragraphs while adhering to two specific constraints: 1) The div in which the text resides must be centered ...

htmlcss

Looking for straightforward tips on parsing CSS code

Seeking advice on how to extract rules and property/values from a .css file or <style></style>. I am not in need of an elaborate parser, as the validity of selector text, property name, or value is not important. My main focus is ensuring that ...

c#vb.netparsingcss

What is the reason behind line-height not affecting the clickable area when reduced?

I have been working on a personal project where I added thumbnails for images that can be scrolled through and clicked to set the main image. However, I encountered a strange issue. To demonstrate the problem, I created a Stackblitz project here: https:// ...

cssangularonclickgrid-layoutline-height

Using JQuery to dynamically change className based on specific logic conditions

I am struggling to dynamically change the class name of a div based on the text inside another div using jQuery. Here is an example of the HTML structure: <div class="div-overlay"> <a class="image" href="https://www.e ...

javascripthtmljqueryvariables

Editing HTML on an ASPX website can be a breeze with

Hello there, I've been tasked with editing a website for a client, but the site is located on a local web server and was designed using aspx. As I review all the files, I am encountering difficulty finding the HTML code associated with runat=server w ...

c#htmlasp.netcode-behind

Do double forward-slash comments work in CSS code?

Is using a double-forward slash (//) for single-line comments in CSS considered reliable and supported by mainstream browsers and CSS interpreters according to the specification? ...

csscomments

The table populated by Ajax is blank

I am facing an issue while trying to display a table using AJAX and PHP. The table is not appearing in the designated div. Since I am new to AJAX, I have limited knowledge about its functionalities. Below is the HTML code for my div: <div class="body" ...

phpjqueryhtmlcssajax

Struggling to locate elements with Python selenium

Just starting out with Selenium and attempting to extract data from a particular website: . This site stores information on hotels across the United States. My main objective is to compile this data into a CSV file where each entry would have a 'State ...

pythonhtmlseleniumweb-scraping

All you need to know about the properties of CSS ul

When I specify .a ul{} .a ul li{} as well as .b ul{} .b ul li{} will the properties of ul in .b be completely isolated from the properties of ul in .a? Or will they have some commonalities? I am looking to ensure that the styles for ul remain entirely ...

htmlcsscss-selectors

navigating up and down html elements using css selectors

Within my code, I have this odd repetitive HTML structure (with no classes) and I'm looking to extract all links along with the accompanying text below each link. While it's simple enough to grab all the links using a basic CSS query selector li ...

jquerycsscss-selectorsdom-traversal

Minimize the width to display a scrollbar

Check out this page: where you'll find the same code snippet displayed twice - once through GitHub Gist embedding and the second using Jekyll's internal syntax highlighter Rouge. I'm currently working on styling the second code snippet to m ...

htmlcss

Tips on gathering information from an HTML for:

After encountering countless programming obstacles, I believe that the solution to my current issue is likely a simple fix related to syntax. However, despite numerous attempts, I have been unable to resolve it thus far. I recently created a contact form ...

javascripthtmlnode.jsjsonexpress