Trying to design a responsive navbar with Bootstrap 5, but facing an issue. Want the logo on the left and nav-links on the right, yet 'navbar-expand-lg' aligns both on the left side. I tried using the 'ml-auto' class in the ul tag, but it didn't work. Any suggestions?
Note: Seems like 'mr-auto' and 'ml-auto' classes are not functioning as expected in Bootstrap 5.
Absolutely, you are correct. By default, negative margins are disabled but can be activated in Sass by setting $enable-negative-margins: true. Take a look at their Documentation: https://getbootstrap.com/docs/5.0/utilities/spacing/#negative-margin
Alternatively, you can incorporate it into your custom CSS. Here's an example of my code -
.custom {
background-color: #333333;
}
.logo {
width: 100px;
}
li a {
color: white;
font-weight: bold;
}
.navbar-nav{
margin-left: auto !important;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a7875756e696e687b6a5a2f342a342a37787f6e7b2b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="icon" href="desk-lamp.png" />
<script
src="https://kit.fontawesome.com/f726a9ed7b.js"
crossorigin="anonymous"
></script>
</head>
<body>
<!-- todo head -->
<header class="custom site-header container-fluid">
<div class="container">
<nav class="navbar navbar-dark navbar-expand-lg">
<a href="#" class="navbar-brand">
<img src="logo.png" class="logo" alt="" />
</a>
<button
class="navbar-toggler"
data-bs-toggle="collapse"
data-bs-target="#nav"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse " id="nav">
<ul class="navbar-nav">
<li class="navigation">
<a target="blank" href="index.html" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" target="blank" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" target="blank" href="reference.html"
>Reference</a
>
</li>
<li class="nav-item">
<a class="nav-link" target="blank" href="contact.html"
>Contact</a
>
</li>
</ul>
</div>
</nav>
</div>
</header>
<!-- todo hero -->
<section></section>
<!-- bost your income -->
<section></section>
<!-- who benifits -->
<section></section>
<!-- course features -->
<section></section>
<!-- course features -->
<section></section>
<!-- video section -->
<section></section>
<!-- instructer section -->
<section></section>
<!-- testimonial setion -->
<section></section>
<!-- sign up section -->
<section></section>
<!-- footer -->
<footer></footer>
<!-- model -->
<div></div>
<!-- boostrap core javascript -->
<script
src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bbd9d4d4cfc8cfc9dacbfb8e958b95de3d7decfd89bacdadbffea3ded2dfdbdaf8ccdbdad2dbe9cb8adedaeeecf08d5ceddfd0dee9">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"
></script>
</body>
</html>Trying to send an ajax request to a page that includes the following meta tag: <meta http-equiv="REFRESH" content="0; URL=https://www.ohterDomain.com/help?nodeId=2&view=content-only"> After making a successful ajax call, the correct content is ...
When I have a section of HTML with Vue components inside it, coming from a server, and then insert it on the page by clicking a button, the components are not rendering or showing up. Here is the HTML that gets inserted when the button is clicked: <sec ...
Seeking advice on how to create clickable areas within an image that lead to different pages on my website. Image maps seem like a good solution, but the issue is that they require specific coordinates which may not work well for responsiveness. I was hop ...
On my page at , there are links on the right side that I am unable to click. Does anyone know why this might be happening? Content on the Left Side: <nav class="woocommerce-breadcrumb" itemprop="breadcrumb"><a class="home" href="http://artendije ...
After successfully building an image slider that displays 2 partial images and 1 full image on hover, I encountered a bug when setting the last image to its full width by default. This caused a temporary gap in the slider as the other images were hovered o ...
I have ten expansion panels. When I click a button in one expansion panel, I want to disable other buttons in the remaining expansion panels. The issue is that when I try to target an id, it does not return e.target.id but instead returns as the value pass ...
I am in need of a straightforward piece of code that can automatically redirect a user to a different URL specified within the current URL: For instance: http://example.com/index.php?URL=anothersite The scenario is as follows: a user first lands on http ...
Currently, I am working on creating standalone error pages (404/503) as individual HTML files. My server-side setup involves Node.js, but these specific files will be hosted directly in Nginx. One of the challenges I am facing is automatically including a ...
This question may seem a bit confusing, but I am in need of some guidance. I do not require any code to be written for me, but rather assistance in finding the right direction to achieve my goal. The task at hand is to monitor a specific area of a web page ...
Currently, I am facing an issue with my line chart having 2 datasets filled with gradients that overlap, causing a significant color change in the 'bottom' dataset. Check out my Codepen for reference: https://codepen.io/SimeriaIonut/pen/ydjdLz ...
I'm struggling with implementing the popover and tooltip features in Bootstrap. While I have successfully implemented drop downs and modals, the tooltips are not styled or positioned correctly as shown in the Bootstrap examples, and the popover featur ...
Just starting out with a question: I created a basic submission form, but I noticed that if there are any spaces in the inputs, the values get changed to a plus sign (+). Here's my form: <form name="input" action="search" method="get"> Web Ad ...
In order to replicate the layout shown in the image, I need to create a div. The left side should contain an image, while the right side should have a title and description below it. It's important to consider that the left side should take up roughly ...
I am currently working on creating a dynamic card that expands and reveals additional information upon mouse rollover. The challenge I am facing is that the shadow effect remains visible when flipping the card, which disrupts the overall desired effect. H ...
Having trouble with my floating labels - any advice? https://i.sstatic.net/fk0CG.png Here is the code snippet: <div class="form-floating mb-3"> <input type="text" class="form-control" autofocus id="txtNome" placeholder=" "> <la ...
Encountering an issue where, upon user scrolling down, a portion of the sidebar becomes fixed in position. However, when attempting to apply CSS for fixing the sidebar element, it ends up fixed to the entire screen instead of just within its parent contain ...
Here is a script I am working with: <script src="http://static.tumblr.com/mviqmwg/XyYn59y3a/jquery.photoset-grid.min.js"></script> <script> $(document).ready(function() { $('.photoset-grid').photose ...
In my quest to develop a slider control with infinite capabilities, I am looking for a way for users to slide left and right on a bar or panel, allowing them to navigate through past dates when sliding left and future dates when sliding right. While there ...
I'm facing an issue with my code where the selected values in a dropdown menu revert back to default every time the page refreshes. How can I ensure that the selected values remain unchanged? Unfortunately, I am unable to utilize AJAX as per the user ...
My objective is to have a group of check boxes on a page where only one can be selected at a time. I want the checked box to clear any other selections when clicked. I attempted to implement this functionality in a fiddle, but it does not work as expected. ...