Hello I am trying to layout my navigation bar with Bootstrap 4 but some reason no matter it is not calling it out. It works in my Google developer inspector but when I insert the same code in my text editor nothing happens. Can someone help me understand what I am doing wrong?
HTML code:
<body>
<!--TOP Navigation -->
<nav class="navbar navbar-default navbar-toggleable-md ">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleContainer" aria-controls="navbarsExampleContainer" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Delvin McCray
<!-- Right Side of Navbar w/ Dropdown Fatures-->
<ul class="nav navbar-nav">
<li class="dropdown">Women <span class="caret"></span>
<!--Dropdown Menu-->
<ul class="dropdown-menu" role="menu">
<li>Shirts</li>
<li>Dresses</li>
<li>Shoes</li>
<li>Accessories</li>
</ul><!--end of dropdown menu-->
</li>
<li class="dropdown">Men <span class="caret"></span>
<!--Dropdown Menu-->
<ul class="dropdown-menu" role="menu">
<li>Shirts</li>
<li>Dresses</li>
<li>Shoes</li>
<li>Accessories</li>
</ul><!--end of dropdown menu-->
</li>
<li>Off the Rack</li>
<li>Fall 2017</li>
</ul><!--End of navbar-right-->
</div>
<!-- Right side Navbar -->
<div class="collapse navbar-collapse justify-content-end"
id="navbarCollapse">
<ul class="navbar-nav">
<li><a class="nav-link" href="#">My Account <i class="fa fa-sign-in" aria-
hidden="true"></i> </a></li>
<li><a class="nav-link" href="#">Shopping Cart <i class="fa fa-shopping-bag"
aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</nav>
</body>
<div class="jumbotron">
<div class="col-sm-8 mx-auto">
<h1>Navbar examples</h1>
<p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the top and fixed top examples.</p>
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
<p>
<a class="btn btn-primary" href="../../components/navbar/" role="button">View navbar docs ยป</a>
</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
CSS styling:
body {
padding-top: 50px;
}
.dropdown, .dropup {
position: relative;
margin-right: 20px;
}
.nav li {
margin-right: 40px;
}
ul.nav.navbar-nav li {
margin-right: 40px;
}
Related
I am getting this issue with Nuxt.
Whenever I use , it automatically rewrites my CSS design and shows it differently. You can see exact issue in the video below.
Video of the issue
If I replace <nuxt-link> with <a>, everything starts to work correctly.
Navbar code example:
<nav class="navbar navbar-expand-lg navbar-dark mb-5 text-white" style="z-index: 10; background-color: rgba(0,0,0,0.3)">
<nuxt-link to="/" class="navbar-brand" active-class="active">
Frontend
</nuxt-link>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon" />
</button>
<div id="navbarNav" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active">
<nuxt-link to="/" class="nav-link" active-class="active">
Home
</nuxt-link>
</li>
<li class="nav-item">
<nuxt-link to="/games" class="nav-link" active-class="active">
Games
</nuxt-link>
</li>
</ul>
Correct css (at the start of the page loading)
Incorrect css (after a few seconds)
Issue was with <style> in index.vue (main page).
Changed it to <style scoped> and the issue is fixed.
I need to place a transparent bootstrap 4 navbar over a full screen image utilising flexbox. I need to be able to expand a carousel container (swiper.js) to fill the view port.
I have managed to expand the carousel container to fill the view port but the navbar does not appear transparently over it. To view what it currently does [click here][1]. To view what I would like to achieve [click here][2]
<nav class="navbar navbar-expand-md navbar-light bg-transparent">
<div class="navbar-brand pr-5">
<a class="d-inline-block" routerLink="/home">
<img src="assets/logo-dark.png" alt="" height="43">
</a>
</div>
<div class="navbar-collapse collapse navbars" id="navbar-navigation">
<div class="navbar-nav">
<a class="nav-item nav-link text-uppercase" href="#>Home</a>
<a class="nav-item nav-link text-uppercase" href="#>Service</a>
<a class="nav-item nav-link text-uppercase" href="#>Product</a>
</div>
</nav>
</div>
<div class="d-flex flex-fill">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide bg-cover" style="background-image:url('http://placehold.it/1920x1080');">
Slide 1</div>
<div class="swiper-slide bg-cover" style="background-image:url('http://placehold.it/1920x1080');">
Slide 2</div>
<div class="swiper-slide bg-cover" style="background-image:url('http://placehold.it/1920x1080');">
Slide 3</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
<main class="page-content content-boxed">
Page content goes here ...
</main>
[1]: https://i.stack.imgur.com/1eB42.png
[2]: https://i.stack.imgur.com/2fr9H.png
To make your image overlap to the navbar, you just have to give position:absolute property to the navbar.
.navbar{
position:absolute;
}
I am using Bootstrap and trying to get the social media icons above the menu - so far I have:
What I am aiming for is something like this:
So the image is at the end - and the menu items are still responsive.
The code I have so far is :
<header class="navbar navbar-inverse header-outer" role="banner">
<div class="container">
<img src="logo1.png " alt="Image" id="logo" class="img-responsive pull-left" />
<div class="social_media">
<ul class="nav navbar-nav pull-left padding-top nextline">
<li><img src="facebook.png" /></li>
<li><img src="twitter.png" /></li>
<li><img src="linkdin.png" /></li>
<li><img src="instagram.png" /></li>
</ul>
</div>
<div class="pull-left padding-top">
<ul class="nav navbar-nav navbar-right">
<li>Sign Up</li>
<li>Sign In</li>
<li>About</li>
</ul>
</div>
<button style="position:relative; left:0;">CONTACT WITH US</button>
</div>
</header>
and the CSS is:
<style>
.social_media {
width: 100%;
}
.navbar{ background:#ffffff; border:none;}
.nextline {
width:80%;
border-bottom : 1px solid #000000;
}
</style>
Has anyone done anything like this???
You have to put another div around the lower part to group it. Only then you can assure that the contact button can be inline with your underline of the social media section, as you set the width to the same as your nextline class. This way you get a container for the part below the line, that has the same width, and you can align the button as you want.
So your code should look like
<div class="pull-left padding-top" style="width:80%">
<div class="pull-left padding-top">
<ul class="nav navbar-nav navbar-right">
<li>Sign Up</li>
<li>Sign In</li>
<li>About</li>
</ul>
</div>
<button class="pull-right padding-top">CONTACT WITH US</button>
</div>
A simple jsfiddle for whole code
https://jsfiddle.net/87xz8q9x/5/
Hope this helps
this is simple. I'm trying to align-items-bottom a gear svg image to the bottom center of a div. However, it always keeps at the top of the div.
I tried both align-items-center and also align-bottom options.
What happens
How it should be
.gear {
height: 50px;
}
.banner {
height: 70px;
}
<footer>
<div class="container-fluid orange-bg banner d-flex justify-content-center align-items-bottom">
<img class="gear d-flex" src="/assets/gear.svg">
</div>
</footer>
There is no align-items-bottom class. The class name is align-items-end..
<div class="container-fluid orange-bg banner d-flex justify-content-center align-items-end">
<img class="gear d-flex" src="//placehold.it/300x70">
</div>
https://www.codeply.com/go/ub6hNpd9TL
Rows and column are your friends in Bootstrap.
So, create a pair, put your image/SVG inside, apply the class d-flex to the column and mt-auto (margin-top:auto) to the image.
Click the "run code snippet" button below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<footer>
<div class="container-fluid bg-warning banner d-flex justify-content-center">
<div class="row" style="height: 60px;">
<div class="col d-flex">
<img class="gear mt-auto" src="https://placehold.it/30">
</div>
</div>
</div>
</footer>
This works in FF but not I.E. The mouseover on the a tag won't activate. I want to be able to set the class for the a tag when user mouse over it.
<div class="selects-options" id="dropsort"
onmouseover="divshowsort();"
style="position: absolute; top: 8px; left: 1px; width: 153px;display:none;"
onmouseout="hidesort();">
<div class="drop-holder">
<div class="drop-list">
<ul>
<li class="items_selected" id="li1" rel="0">
<a onmouseover="sortclass('li1');"
onclick="divhidesort('R');" href="#">
<span>Relevance</span>
</a>
</li>
<li class="" id="li2" rel="1">
<a onmouseover="sortclass('li2');"
onclick="divhidesort('A');" href="#">
<span>Title A-Z</span>
</a>
</li>
<li class="" id="li3" rel="2">
<a onmouseover="sortclass('li3');"
onclick="divhidesort('D');" href="#">
<span>Newest</span>
</a>
</li>
</ul>
</div>
</div>
</div>