The issue lies in the alignment of the navbar at the top

After retrieving this script:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<nav class="navbar bg-light navbar-expand-sm justify-content-center">
    <a class="navbar-brand" href="/test2">
        <img src="css/favimg/logo.png" height="40" alt="test">
    </a>
    <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 3</a>
        </li>
    </ul>
</nav>


<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a6d6c9d6d6c3d488ccd5e6978897908896">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

The issue arises when the first link2 is misaligned with the main logo

view photo for further clarification

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

If you're encountering an issue in the snippet, simply add the class align-items-center to resolve it.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<nav class="navbar bg-light navbar-expand-sm justify-content-center">
    <a class="navbar-brand" href="/test2">
        <img src="css/favimg/logo.png" height="40" alt="test">
    </a>
    <ul class="navbar-nav align-items-center">
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 3</a>
        </li>
    </ul>
</nav>


<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="79091609091c0b57130a394857484f5749">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

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

I recently implemented a delete function in my code that successfully removes a row, but now I am looking to also delete the corresponding data from localStorage in JavaScript

I have successfully implemented a delete function in JavaScript that deletes rows, but I also want to remove the data from local storage. This way, when a user reloads the page, the deleted row will not appear. The goal is to delete the data from local s ...

javascripthtmljavascript-objects

I'm encountering an issue trying to launch bigbluebutton HTML5. I attempted to initiate it using "npm start" after installing it with "meteor npm install," but unfortunately, it failed to

I've been attempting to launch the Development environment for bigblubutton-html5, but unfortunately, I encountered an error message after executing this command: npm start Please refer to the tutorial I used: Here's the error message that was ...

htmlnpmmeteorbigbluebutton

When a div with a height of 100% exceeds its parent container, it spills over to the flexbox

I have a unique problem with my flexbox layout. Each element within the flexbox contains a card that varies in height. Attempting to make the cards occupy the remaining space of their parent container causes them to overflow into the row below. Even settin ...

htmlcssflexbox

Is there a way to extract and exhibit the text from an image using Python?

Could someone assist me in extracting only the text within the highlighted red area? I have been experimenting with Python but haven't been successful in achieving this. My goal is to create a script that prompts for an address, then opens Firefox (or ...

htmlpython-3.xseleniumtextdisplay

What is the best way to optimize Bootstrap 5 grids for mobile responsiveness?

Within my portfolio, I have a projects section that switches between having the description on the left with an image on the right and vice versa. Despite my efforts to make it responsive, I'm struggling to figure out how to ensure the image appears a ...

htmlcssbootstrap-5

Hovering over the top menu items in AngularJS will reveal dropdown submenus that will remain visible even when moving the cursor

I am facing an issue where my top menu has links that display a dropdown of additional menu items upon hovering. I have attempted to use onmouseover and onmouseleave events to control the visibility of the sub menu. However, I have encountered a problem ...

javascripthtmlcssangularjs

What is the best way to apply a CSS class to newly added records within an HTML table that are being fetched from a MySQL database?

The title does not provide clear instructions. If more details are needed, the code below displays data from a MySQL database table on an HTML page: <?php $db_host = 'localhost'; $db_name = 'DB'; ...

phphtmlmysql

Is there a feature in JavaScript that allows for the creation of URLs?

I created an index view displaying cards (like playing cards) in a grid using BootStrap. Each card is within its own div element, and I implemented a jQuery click handler for each div to open a details page when clicked. The redirect from the index to the ...

javascriptjqueryhtml

Material UI defaults remain unchanged despite any emotional influence

I'm currently experimenting with custom styling on a MaterialUI Typography component using the code snippet below: const StyledTitleTypography = styled(Typography)` color: 'black'; font-weight: 'bold'; `; <StyledTitleTypogr ...

cssreactjsmaterial-uistyled-componentsemotion

Creating a dynamic list filter using JavaScript and three select boxes

Looking for a way to implement a similar feature to the one on this webpage: I will be showcasing a list of brands on the page, with each brand requiring three pieces of information: Starting letter Store (multiple options) Category (multiple options) ...

phpjavascripthtmlwordpress

What is the appropriate syntax for the second division?

<style> .panel{ border:1px solid #000; } </style> <div class="body"> <div class="panel"></div> <div class="panel" style="border-top:0px;"></div> </div> In order to apply the style border-top:0px; to ...

css

Enable a single flex item to wrap across multiple lines

I have an HTML code snippet that needs to be styled using Flexbox. Specifically, I want to re-order the elements and create a 'line break' before the last item. How can I utilize Flexbox so that most flex items are treated as atomic units, but on ...

cssflexbox

HTML/JS Implementation: Back to Top Visual Element

- This website appears to be quite simple at first glance. However, I have encountered an issue where every time I scroll down and then click on the "About" menu option, it abruptly takes me back to the top of the page before displaying the section with a ...

javascriptjqueryhtmlcss

What is the best way to implement a sliding animation for a toggle button?

Currently, I am working on a toggle bar element that is functioning correctly in terms of styling the toggled button. However, I would like to add more animation to enhance the user experience. The concept is to have the active button slide to the newly s ...

cssvue.jssasscss-animations

Enlarge the DIV element along with its contents when those contents have absolute positioning

When attempting to overlay two divs like layers of content, I encountered a challenge. Because the size of the content is unknown, I used POSITION:ABSOLUTE for both divs to position them at the top left of their container. The issue: The container does no ...

javascriptcss

Seeking assistance with my personal portfolio project - any takers?

I'm facing an error on a coding challenge that says: "The height of the welcome section should be equal to the height of the viewport." I have set it to 100vh but I'm unsure how to resolve it. Here is the HTML code: <header> <nav id=& ...

htmlcss

changing font size on a mobile-friendly site using javascript

Currently, I am designing a responsive webpage utilizing Bootstrap framework. Situated in the center of the screen is a text that reads: <p id="entershop" ><a class=no-deco href="shop.html">enter shop</a></p> Within the Bootstra ...

javascripthtmlcssbootstrap-4screen-size

Place each label and input element on a separate line without using div tags

Can we separate form elements onto individual lines without enclosing them within divs? For example: <label for="one">One:</label> <input type="text" id="one"> <label for="two">Two:</label> <select id="two"> ...

htmlcssforms

Inspect each chart for information and conceal any that are empty

Currently, I am attempting to analyze my highcharts graphs for data during loading and each redraw. I have successfully implemented the following code: (function (H) { var chartPrototype = H.Chart.prototype; // Display or hide graph based on da ...

javascriptphpjqueryhtmlhighcharts

Vagrant Nimble Selections

Can anyone explain why my navigation bar is appearing below the header instead of beside the logo? I dedicated an entire day yesterday to designing a page with the same layout. Everything is identical in terms of design and coding, except that I initially ...

htmlcsslayout