I have problem with fixed navbar. I want that my navbar can be scrolled. Ok, I added to my .nav overflow-x: scroll and when I have some nav-items in my navbar, it looks like:
When nav-items 'overflow' navbar, it looks that:
html:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-bottom">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
Ostatnie notowania:
</li>
<li v-for="list in listsList" :class="{ active: checkActive(list.toUrl) }" class="nav-item">
<a #click.prevent="openList(category, list.toUrl)" href="#">{{ list.toView }}</a>
<click-confirm style="display: inline-block;" button-size="sm" :messages="{ title: 'Jesteś pewien?', yes: 'Tak', no: 'Nie' }">
<i #click.prevent="deleteList(category, list.toUrl)" class="fa fa-times" aria-hidden="true"></i>
</click-confirm>
</li>
</ul>
nav {
overflow-x: scroll;
}
I don't know how to fix this, I need help.
check your navbar parent have any fixed width or container width in it, then make it to 100% width to its parent where you have declared any fixed width available.
Related
I'm taking over a project from a work colleague. I'm trying to get the Navbar to stop collapsing when the browser window is made smaller. I'm not proficient in Bootstrap, so I need help.
Here is the HTML and Javascript.
<body onresize="onResize()">
<div id="masterlayout" class="fixed-top">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<h1 class="navbar-brand d-flex align-items-center">Divine</h1>
<div class="container">
<ul class="nav navbar-nav">
<li></li>
<li class="nav-item nav-link mx-1">#Html.ActionLink("Home", "Index", "Home")</li>
#if (1 == 1)
{
<li class="nav-item nav-link mx-1">#Html.ActionLink("Site Admin", "RegisterUsers", "SiteAdmin")</li>
}
<li class="nav-item nav-link mx-1">#Html.ActionLink("Promotional", "Promotional", "Promotional")</li>
<li class="nav-item nav-link mx-1">#Html.ActionLink("Reports", "Contact", "Home")</li>
</ul>
</div>
#Html.Partial("_LoginPartial")
</nav>
<div style="background-color: darkgray; width: 100%; height: 10px;">
</div>
</div>
<div id="content1">
#RenderBody()
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
var height = document.getElementById("masterlayout").offsetHeight;
document.getElementById("content1").style.marginTop = height - 1 + 'px';
});
$(document).ready(function () {
var height = document.getElementById("masterlayout").offsetHeight;
document.getElementById("menu").style.marginTop = height - 1 + 'px';
});
function onResize() {
var height = document.getElementById("masterlayout").offsetHeight;
document.getElementById("content1").style.marginTop = height - 1 + 'px';
}
function onResize() {
var height = document.getElementById("masterlayout").offsetHeight;
document.getElementById("menu").style.marginTop = height - 1 + 'px';
}
</script>
Here is the CSS portion.
.container {
max-width:800px;
margin-left:0px;
}
Here is a picture of what it looks like normal.
This is what it does when I minimize the screen. I want it to just fall off the screen and not compact itself.
I've tried inputting <style> min-width="800px"</style> directly in both divs,and the nav and the UL. Nothing worked. I'm thinking I need to utilize bootstrap to do this or Javascript, and I don't know enough about that, but I'm willing to learn!
Result I want the browser window to be able to be minimized, and the navbar to stay like it is when it's long, and not wrap around and lower itself.
You are using the Bootstrap class navbar-expand-md which is telling the browser to collapse the nav on screens smaller than 768px - if you change that to navbar-expand, it stops the nav from collapsing. If the menu options no longer fit into the width of the screen, they will wrap to a second line.
If you want to prevent this you can set a min-width on your container. However note that because the nav uses the fixed-top class, it has position:fixed meaning that the right-most items will be off-screen on smaller devices and the user cannot access them. You would need to remove the fixed positioning, or you could add a scrollbar to the nav (but that is ugly and unwieldy).
Working Snippet with navbar-expand:
.container {
max-width:800px;
margin-left:0px;
/* IF YOU WANT TO PREVENT THE ITEMS WRAPPING ONTO A
2ND LINE WHEN THEY NO LONGER FIT IN THE WINDOW:
min-width:500px;
*/
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<body>
<div id="masterlayout" class="fixed-top">
<nav class="navbar navbar-expand navbar-dark bg-dark">
<h1 class="navbar-brand d-flex align-items-center">Divine</h1>
<div class="container">
<ul class="nav navbar-nav">
<li></li>
<li class="nav-item nav-link mx-1">Home</li>
<li class="nav-item nav-link mx-1">Site Admin</li>
<li class="nav-item nav-link mx-1">Promotional</li>
<li class="nav-item nav-link mx-1">Reports</li>
<li class="nav-item nav-link mx-1">Login</li>
</ul>
</div>
</nav>
<div style="background-color: darkgray; width: 100%; height: 10px;">
</div>
</div>
</body>
References: Bootstrap Navbar
I'm trying to vertically align a fontawesome icon with some text in a navbar from bootstrap. The vertical size of the navbar is set to 10vh. I'm not able to get the text aligned with the icon, it appears like in the below image:
Also I would like to add some horizontal space between the icon and the text. Here is my code:
<nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark h-100">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item active">
<a class="nav-link d-flex align-items-center justify-content-center" href="#">
<i class="fa fa-home fa-2x icon-white"></i>
<p>Home</p><!--<span class="sr-only">(current)</span>-->
</a>
</li>
... (some more li)
</ul>
</nav>
I've also tried to put the icon inside the paragraph, placing the a element inside a div, and setting both of the same font-size, but I cannot make it work.
Try the following code, it worked for me:
<nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark h-100">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item active">
<a class="nav-link" style="display: flex; align-items: center;" href="#">
<i class="fa fa-home fa-2x icon-white"></i>
<p style="margin-left: 12px;">Home</p>
</a>
</li>
... (some more li)
</ul>
</nav>
Also, here I'm giving the space between the text and the icon as 12px, you can change this according to your need.
You should make the tag a flex container with height 100% (obviously after setting position: relative. Then you can easily do justify-content: center; and align-items: center;
For any other HTML and CSS noob like me, it seems that p elements have margin by default. I have seen this question where it says that CSS 2.1 specification has a default style sheet for basic elements. Removing the bottom margin of the p element made it aligned with the icon.
Regarding horizontal space, DIVYIA BAID's suggestion to set a left margin is exactly what I was looking for.
it's very simple
Try This code for best alignment for Fontawesome or any other icon
<li styles="display:flex">
Home
<i class="fal fa-home" style="vertical-align: middle;margin: auto;"></i>
</li>
Wrap the content in a flex container and then align items center to horizontally align them.
I have a bootstrap 4 navbar which is set to expand on lg and collapse on small devices. This works on a default navbar height but whenever I set the navbar to a height smaller than the default height the expand for the small devices doesnt work...
HTML-Code:
<header style="background-color: blue;color: white;font-size: 14px">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-default" style="height:30px">
<ul class="navbar-nav mr-auto flex-row justify-content-start">
<li class="nav-item">
<a href="#" class="mr-4">
<i class="fa fa-twitter-square fa-lg"></i>
</a>
</li>
</ul>
<a class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-road"></i>
</a>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav ml-auto d-flex">
<li class="nav-item active d-inline">
<a class="nav-link" href="#">Home1 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active d-inline">
<a class="nav-link" href="#">Home2 <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
</div>
</header>
The content is also not set in the middle. What am I missing out?
The above shows the following. Even the expand fails
I want to define the height as 30px and i want the content to center vertically in the set height.
Actually Bootstrap navbar height is not defined by a CSS height property, but it changes with <a> padding and their content.
Try to add py-0 CSS class to <a> of your navbar to remove padding top and bottom.
See this example: https://codepen.io/navalex/pen/jOPXxor
Setting the height to 30px here is causing your issue:
<nav class="navbar navbar-expand-lg navbar-default" style="height:30px">
Here is a codepen that shows your code in a standard boostrap4 template with that inline style commented out:
codepen
My navbar works really well and it is fully responsible, but when I open confirm dialog in background my navbar width goes to 800px even if screen has 1480px making an empty space on the right side like you can notice on the screen.
I really don't have idea how to fix it, this is my navbar:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" routerLink="">frontend</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link menu-item dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Vehicles</a>
<div class=" dropdown dropdown-menu">
<a class="dropdown-item menu-item" routerLink="/topic"> Vehicles list </a>
<a class="dropdown-item menu-item" routerLink="/add-topic"> Add vehicle </a>
</div>
</li>
</ul>
</div>
</nav>
<router-outlet></router-outlet>
I use default confirm dialog from primeNg without any changes:
confirm dialog
Maybe I could somehow make additional css to navbar to make position allways on 100% of screen? Any ideas how could I do that?
You are using bootstrap navbar and primeng so some css are getting conflict. If you write below css in style.css so navbar working normal.
.ui-overflow-hidden {
position: unset !important;
}
I'm trying to create a navigation bar in which the brand logo is on the left, but the navigation bar links are on the right. At the moment, the navbar links are on the right but are displayed on top of each other instead of next to each other:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Peek Solutions</a>
<div class="navbar-nav justify-content-end">
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Services</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</nav>
I've tried to right-align them using .justify-content-end following https://getbootstrap.com/docs/4.0/components/navs/, but so far it's not looking the way I want it. (I've also looked at the Bootstrap 4 source code but wasn't able to quickly determine what the issue was).
Update
If I use the following snippet,
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Peek Solutions</a>
<div class="navbar justify-content-end">
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Services</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</nav>
then the positioning is as desired (see https://jsfiddle.net/qxdsam8t/10/) but the color of the links reverts to its default color of blue, instead of the light gray theme color. If I add the class navbar-nav to the inner div, then the colors go back to the theme colors, but the display is 'stacked' like I started out with. It seems that these properties are 'coupled'; how can I get the colors but not the 'stacking'?
The menu item stacking happens due to the .navbar-expand-lg class. xs/sm/md viewports will stack the menu items since the rendering should be stacked once the collapsed menu view (hamburger menu) is being used. You can see I changed it to .navbar-expand-sm to hopefully illustrate this better when running the code snippet (depending on how wide your browser is).
Also, add .justify-content-between to the <nav> element to right align the nav or you can add .ml-auto to the .navbar-nav <div> or even use .w-100 along with .justify-content-end to force nav to be full width.
You'll probably want to wrap the .navbar-nav element with: <div class="collapse navbar-collapse"></div> and include a navbar toggler button, similar to their documentation: https://getbootstrap.com/docs/4.0/components/navbar/#toggler
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark justify-content-between">
<a class="navbar-brand" href="#">Peek Solutions</a>
<div class="navbar-nav justify-content-end">
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Services</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</nav>
The document you linked states to use either a <ul> element or a <nav> element.
Classes are used throughout, so your markup can be super flexible. Use
<ul>s like above, or roll your own with say a <nav> element. Because
the .nav uses display: flex, the nav links behave the same as nav
items would, but without the extra markup.
<nav class="nav">
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
</nav>
Your setup is not good at all. Take a look at bootstrap documentation here. To align your nav to right use "ml-auto" bootstrap class in ul element in your nav. Bootstrap 4 is all about flexbox layout, so you have to be really precise with HTML markup.