I am pretty new to html/css/bootstrap 4 and am creating a navbar as of now. Basically I want a youtube logo that redirects to a yt channel on the left, spotify logo to spotify creator on the right and in the middle the name of the creator, which is a dropdown for navigating the site. Somehow I managed to do this with one exception - name of the creator isnt centered by viewport, so when I go to create a headline with they arent aligned horizonally - the name is a bit off center (to the right). How do I go about centering it? -
My messy code:
<nav class="navbar navbar-light bg-black">
<a class="nav-link" style="color:white" href="https://www.youtube.com/channel/UC_OvfkWfYRvdkazcOoeJd8Q"><img src="img/yt-logo-dark.png" alt="YouTube" height="25px"></a>
<ul class="nav justify-content-center">
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" style="color:white"><h2>KJK Music</h2></a>
<div class="dropdown-menu">
<a class="dropdown-item disabled" href="about-me">O mně</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item disabled" href="about-site">O stránce</a>
</div>
</li>
</ul>
<a class="navbar-link" style="color: white" href="https://open.spotify.com/artist/7vlBedEBJhQlJCl1tpknhi"><img src="img/SpotifyIcon.png" alt="Spotify" height="50px" style="margin:12.5px"></a>
</nav>
(Had to do it as a snippet, otherwise the formatting would be even wierder)
If you want to make horizontal center "KJK Music", it is already centered because your tag have justify-content-center class. + You can user "text-center" class to make it horizontally centered or text-align:center CSS property.
Related
I want to responsively align items on the bottom of a sidenav, made using Bootstrap 5. I incorporated an example of a sidebar from the official Bootstrap Examples, and the .offcanvas class.
In the example, there was a dropdown next to a user profile where the user can access a ton of settings –– aligned at the bottom of the sidebar. However, that just wouldn’t work for me in my version of the offcanvas sidebar. I have tried a multitude of ways, but none of them have worked responsively.
Below is my code, not first and foremost, but at a decent introductory point in this question.
<!DOCTYPE html>
<html lang="en">
<head>
<title>BS5 Offcanvas Sidenav</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.5.0/css/all.min.css" rel="stylesheet">
<style>
.dropup {
position: absolute;
bottom:0;
padding-bottom:2vh;
}
</style>
</head>
<body>
<main>
<nav class="navbar navbar-dark bg-dark d-md-none d-lg-none" aria-label="Dark offcanvas navbar">
<div class="container-fluid">
<a class="navbar-brand" href="#">Side Nav</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarDark" aria-controls="offcanvasNavbarDark">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-start text-bg-dark flex-column d-flex" tabindex="-1" id="offcanvasNavbarDark" aria-labelledby="offcanvasNavbarDarkLabel" style="min-width:160px;max-width:210px">
<div class="offcanvas-header">
<span class="fs-4">Offcanvas</span>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="text-bg-dark offcanvas-body" style="height:100%">
<hr>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="#" class="nav-link active" aria-current="page">
Home
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
Option A
</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link align-items-center text-white text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Option B
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow">
<li><a class="dropdown-item" href="#">B. 1</a></li>
<li><a class="dropdown-item" href="#">B. 2</a></li>
<li><a class="dropdown-item" href="#">B. 3</a></li>
<li><a class="dropdown-item" href="#">B. 4</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">B. 5</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">B. 6</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-link text-white">
Option C
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
Option D
</a>
</li>
<li>
<a href="#" class="nav-link text-white">
Option E
</a>
</li>
</ul>
<hr class="mt-auto">
<div class="dropup">
<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://avatars.githubusercontent.com/u/0" alt="" width="32" height="32" class="rounded-circle me-2">
<strong>Jippy</strong>
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow">
<li><a class="dropdown-item" href="#">New Project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="bg-light mx-auto">
<h1 class="display-5 fw-normal">Navbar with offcanvas</h1>
<p class="fs-5">This is a navbar that uses the <code>.offcanvas</code> Bootstrap class to work. I used a simple sidebar template from the official Bootstrap Examples along with the offcanvas class to make this work. The sidebar only shows on smaller screens.</p>
<p>However, I am facing a <b>problem</b>. The dropup that should be displayed at the bottom of the sidebar? It is made using <code>position: absolute</code>, thus it starts to overlay on top of the other sidebar components if the vertical height is too small. However, I can't figure out how else to put the dropup at the bottom, which is the core of my problem.</p>
<p>Sure, one could think that no one will probably ever go onto a website with a screen height of less than 400px, but with the age of smartwatches, I'm not too sure about that. So, I want to make this responsive. How can I do that?
<p>
<a class="btn btn-primary" href="https://getbootstrap.com" role="button">Made using Bootstrap 5.2.3</a>
</p>
</div>
</div>
</main>
</body>
</html>
As you can see above, I have incorporated some styling to try to get what I want to happen.
<style>
.dropup {
position: absolute;
bottom:0;
padding-bottom:2vh;
}
This works decently well, but does not work correctly on smaller screens.
I have some images to show to explain what’s wrong.
This image shows what the positioning of the dropup is on a standard phone, and I have no complaints here.
However...
When the screen height gets below 400px, the dropup continues to stay at the bottom of the sidenav, causing it to overlay on the other items
EDIT: I don’t have enough reputation to post the images directly, so please follow the links StackOverflow generated.
Citizen
Try using The code Below after changing class names
#media screen and ( max-height: 400px ) {
.logo{
reduce font size of text menu e.g- font-size:12px;
reduce height and width of image e.g- width: 100px; height:30px;
reduce top/bottom padding and margin e-g - margin-top:2px; margin-bottom:2px;
}
.search{
reduce font size of menu items
reduce gap between menu items
}
.main-menu{
reduce font size of menu items
reduce gap between menu items
}
}
I am new to coding and I appreciate this will be a very basic question. I am putting a very basic navbar together using Bootstrap 4. As per the documentation, I have been putting the logo image within an <a> tag and giving this tag the class of navbar-brand. My understanding is that when there is a logo item, it aligns left and the menu items i.e. links, align right by default.
In my case, I am using only a logo image and it all aligns correctly until I resize the screen to a smaller size and it changes to the navbar-toggler (which is what I want). When I do this though, the menu icon appears on the left, underneath the logo. I would like the toggler to appear on the right, as it appears in the bootstrap documentation. I have checked and there doesn't appear to be any padding or similar pushing it underneath it.
This is the code I have been using (the menu items are just placeholder for now while I get the functionality working)
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img class="logo-img" src="media/HBS - Large Logo - Pink - Transparent Background.png" alt="" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon mr-auto"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a
>
</li>
</ul>
</div>
</nav>
I read a few other entries on here and someone had got around this by removing the <a> tag and applying the navbar-brand class to the image itself. When I do this, it works and the navbar-toggler aligns right as it should, only now the menu items when in large screen mode align-left alongside the logo.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<img class="logo-img navbar-brand" src="media/HBS - Large Logo - Pink - Transparent Background.png" alt="" />
It was always my understanding that the navbar-brand class and logo image should be held within an <a> tag? When there is no image and it's the only text for the navbar logo, all the alignment works fine, it's only when there is an image.
Sorry for what is a very basic question - I'm learning to code at the moment so I am keen that I am getting the fundamentals right rather than hacking around things. Thanks in advance.
I'm having an issue with the CSS of my Bootstrap dropdown menu for my web app. It is too far to the right edge of the page for my liking, and I would simply like it to be shifted to the left a bit more. I have tried to style the menu with a margin-right in order to get it off the edge of the screen, but still no luck even though if I do the same with margin-left, it moves the menu even farther off the right edge of the screen. I need some assistance with the CSS on this issue. Below is what the menu looks like:
I simply have given an ID "dropdownMenu" to the dropdown, and it is being applied to the correct HTML element, but the margin-right is simply not working. Here is the accompanying HTML:
<ul class="navbar-nav ml-auto">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
More <span class="caret"></span>
</a>
<ul class="dropdown-menu" id="dropdownMenu">
<li class="nav-item">
<a class="nav-link" href="${contextRoot}/profile">
Account
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:$('#logoutForm').submit();">
Sign Out
</a>
</li>
<sec:authorize access="hasRole('ROLE_ADMIN')">
<li class="nav-item">
<a class="nav-link" href="${contextRoot}/register">
Register
</a>
</li>
</sec:authorize>
</ul>
</li>
</ul>
#dropdownMenu {
margin-right: 2% !important;
position: relative;
}
You can try for example margin-right: 20px !important.
!important will gonna apply the margin right to your element because it will gonna override the old value.
The original CSS for Bootstrap dropdown-menu class has property left:0. I altered this, and the final placement I liked was left:-10px; You see in the image the menu is no longer on the edge.
I added a dropdown menu to my bootstrap4 navbar, but the dropdown menu exceeds the page by quite a bit (on the right side).
I tried applying a few things I saw on google like adding dropdown-menu-left or drop-left but both haven't worked for me. The only thing that works at the moment is applying margin-right to the element but that's not what I want since it ruins the format of my navbar.
https://imgur.com/a/jpCWi3e
My html
<!-- right side -->
<ul class="navbar-nav ml-auto">
#if (isset($_SESSION['user_data']))
<!-- Dropdown -->
<li class="nav-item dropdown" style="right: 0;">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
{{$_SESSION['user_data']->username}}
</a>
<div class="dropdown-menu dropleft">
<a class="dropdown-item" href="{{ url('/servers') }}">Manage servers</a>
<a class="dropdown-item" href="{{ url('/logout') }}">Logout</a>
</div>
</li>
#else
#endif
</ul>
Have you tried dropdown-menu-right on your dropdown-menu ?
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="{{ url('/servers') }}">Manage servers</a>
<a class="dropdown-item" href="{{ url('/logout') }}">Logout</a>
</div>
Here's a fiddle for that (try to enlarge the preview window if you see the mobile layout).
Is it what you're looking for?
See bootstrap4 documentation for more details on menu alignment
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;
}