This is a responsive navigation bar created using bootstrap. The issue I am facing is that I want the navigation items to be displayed in a single row.
This is a responsive navigation bar created using bootstrap. The issue I am facing is that I want the navigation items to be displayed in a single row.
CSS
img{
width: 100%;
height: 500px;
}
.dropdown-menu{
background-color: #49f357;
}
.dropdown-menu{
right: 0 !important;
}
.dropdown-toggle{
background-color:#2de03c;
}
.dropdown-toggle > .active { color: aqua;}
.dropdown-toggle:hover {background-color: #0eb41c;}
.dropdown-menu > .active > a,.dropdown-menu > .active > a:hover.dropdown-menu > .active > a:focus {color: white!important; background-color: #e7e7e7!important;}
.dropdown-item{
background-color: #2de03c;
}
.dropdown-menu-center {
left: 50% !important;
right: auto !important;
text-align: center !important;
transform: translate(-50%, 0) !important;
}
.textwhite{
color:white ;
}
.collapse ul.navbar-nav> .nav-item > a {
color: white;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
.nav-collapse.collapse {
display: none !important;
height: auto !important;
overflow: visible !important;
}
.navbar{
position: sticky
}
HTML
<div class="d-none d-xl-block p-0">
<nav class=" navbar navbar-expand-md navbar-dark fixed-top" style="background-color: #10c720;">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04"
aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse mb-2" id="navbarsExample04">
<ul class="navbar-nav">
<li class="nav-item active" style="margin-left: 150px;">
<a routerLink="/Home" class="nav-link ml-2 mt-2 mr-2 fontsize" href="#">HOME <span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item ml-2 mt-2 mr-2">
<a routerLink="/About" class="nav-link fontsize">ABOUT</a>
</li>
<li *ngIf='isMale' class="nav-item ml-2 mt-2">
<a routerLink="/Bride" class="nav-link fontsize">ABOUT</a>
</li>
<li *ngIf='isFemale' class="nav-item ml-2 mt-2">
<li class="nav-item ml-2 mt-2 mr-2">
<a routerLink="/Contact" class="nav-link fontsize">CONTACT</a>
</li>
</ul>
<div class="dropdown text-center border border-danger ">
<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Login
</button>
<div class="row border border-primary">
<div class="dropdown-menu dropdown-menu-center border border-danger" aria-labelledby="dropdownMenuButton">
<div class="">Login
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address"
required>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password"
required>
<div class="help-block text-right">
<a href="">Forget the password ?</a>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> keep me logged-in
</label>
</div>
</form>
</div>
<div class="bottom text-center">New here ? <a href="#"><b>Join Us</b></a>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
Output
I'm attempting to implement AJAX functionality in a JQuery listview that will make flash yellow, but unfortunately I am having trouble getting it to work. Could someone provide me with some guidance? http://jsfiddle.net/zFybm/ ...
I would like to incorporate a loading spinner within the bootstrap tabs. When a user clicks on a tab pane link, a loading spinner will be displayed for a few seconds before showing the actual tab content. HTML : <ul class="nav nav-tabs" id=&q ...
Issue with the usage of <div> elements Everything runs smoothly: Text "Whatever" appears in column 1, followed by a radio button: No issues here (text without a radio button): The cell immediately following the text "Whatever" should display in co ...
I created a unique navigation bar using Bootstrap 4's grid system. The navbar is designed with two sections: one for the navigation items on the left and another for the search box on the right. Unfortunately, I am facing an issue where the search box ...
I am currently utilizing the Ionic Framework along with its grid system that is reminiscent of Bootstrap. However, I believe my query leans more towards AngularJS than specific Ionic components. Here is what I have: <ion-col *ngFor="let col of row ...
I am currently working on setting up a navigation bar with multiple items aligned to the right side. However, I have encountered an issue where clicking on the "notification" icon causes the other icons in the navbar to move instead of remaining fixed in p ...
Checking if a string is an HTML tag can be tricky. I've tried various methods found on Google, but none have been successful so far: var v = $(string).html() ? 1 : 0; --or---------------------------------------------- var htmlExpr = new RegExp("/^( ...
I have incorporated a sample code into this html/css document that utilizes a script to generate a 3D cube using three.js. Upon opening the HTML file, I am presented with a blank page in chrome displaying only, "canvas { width: 100%; height: 100% }" Belo ...
I am attempting to create a dropdown menu with multiple levels. However, when I hover over the first level, the second level appears slightly above and to the left of the first level. I want the second level to appear directly below the first level in the ...
After searching extensively online, I was unable to find a suitable solution for my issue. What I am aiming for is to have a popup appear on my page every day at 5:00 PM without the need to refresh the page. If I happen to access the page before 5:00 PM an ...
When there is only one item in the XML document, I want to update my inner HTML with the result of an API call. I have managed to successfully make the API call work when there are multiple items in the XML document (thanks to W3). <!DOCTYPE html> ...
I am facing an issue with a parent div that contains multiple child divs. When there are many children, they all remain in a single row without adjusting into columns. Below is my current HTML: item1 item2 item3 ... <mat-card class="hove ...
I am having some trouble with implementing the Perfect Scrollbar alongside an accordion slider menu. The scrollbar is not working as expected, and you can view the fiddle here. On initial page load, the scrollbar only appears for the first sub-menu aft ...
Could someone please explain to me why when I test this code on Google Chrome using the mobile emulator for Galaxy S3, it displays the correct size (640x360), but when I try to load it on my actual Galaxy S5 or any other device, the size is different from ...
I am seeking a way to automatically open a specific tab within a modal using its URL. To achieve this, I have included the following JavaScript code at the end of my website. By entering website.com/#modal-6 in the browser, it will open with modal-6 activa ...
Alright, so here's the scenario: I have created a table along with two drop-down filters. The first filter is for selecting the Year, and it offers options like "All", "2023", "2022", and "2021". When I pick a specific year, let's say "2022", onl ...
Currently, I am developing a project with Highcharts where I have a specific requirement to display a modal popup when a node on an org chart is clicked. The popup should also contain another org chart. Below is the code snippet I am working with: [link to ...
I am looking to create a slider that includes a form or text. However, I have noticed that when scaling up by 50-75% or when there is a lot of content, the content extends beyond the slider. Image Check out my code on jsfiddle: jsfiddle.net/sL70r2an/ ...
I have been using the following code to simulate a spinning wheel for users. It is functional, but I am facing an issue where the rotation stops abruptly at a specific circle before applying the style for the winning circle. My query is: Is there any way ...
I was pondering if there is a more efficient method to accomplish this task. I extract links from a webpage, but many of them are relative. for example /index.html for instance /home.index.html Currently, my approach involves adding the home URL to compe ...