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.
Related
I'm struggling to position button which is nav container to the right side of the screen. All other nav-items need to be on the center so i`m using justify content center.
I have tried to use:
margin-left:auto on the button, but it moves other links on the left side.
remove justify-content-center on nav and add flex-shrink:1 with margin-left: auto on the button.
move button outside nav flex group, but then button appears on the next row.
Screenshot of the nav container and button what need to position on the right side:
HTML:
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Places</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Careers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<button type="button" class="btn btn-primary">Primary</button>
</ul>
You were almost on the right track.
You would need to take the button out of the list, and then declare the entire enclosing nav for the list and button to be a flex with center. That would more or less result in the same thing you have now, but it will have the list and the button as separate items. Then you'd take the list and make it grow as much as it can to the end using the class flex-grow-1 or flex-fill. That will push the button to the extreme right still being on the same row.
Here's the fiddle: JSFiddle
I have the following bootstrap nav tabs:
<div class="container">
<ul class="nav nav-tabs" id="projectTabStrip" role="tablist">
<li class="nav-item" id="projectDetailsTab">
<a class="nav-link">Project Details</a>
</li>
<li class="nav-item" id="projectStatusTab">
<a class=nav-link>Status</a>
</li>
<li class="nav-item" id="projectDocumentsTab">
<a class=nav-link>Documents</a>
</li>
</ul>
</div>
I removed all of the href tags for brevity and to make it easier to read.
My problem is that the tabs are displaying like this:
By default, the tabs should be on the left side of the page, correct? What is causing this issue?
My goal is to get the tabs to align to the left side of the page, something like this:
Based on the code you've provided it would appear that your container is the problem. The container element applies a fixed width to everything within it, centering itself to the viewport.
The code that you have provided doesn't suggest that this component is required, but given that you've provided a minimal example you may expect unforeseen issues with its removal.
As mister #Robert already wrote, the align left problem caused by .container div. Although lets write your code more correct. You misses .active class in first li a. And a href attribute you will need anyway. Minimal it should be href='#' for the correct work of Bootstrap tabs.
<div class="any-class-not-container">
<ul class="nav nav-tabs" id="projectTabStrip" role="tablist">
<li class="nav-item" id="projectDetailsTab">
<a class="nav-link active" href="#">Project Details</a>
</li>
<li class="nav-item" id="projectStatusTab">
<a class="nav-link" href="#">Status</a>
</li>
<li class="nav-item" id="projectDocumentsTab">
<a class="nav-link" href="#">Documents</a>
</li>
</ul>
</div>
More about Nav tabs in Bootstrap 4 you can read here https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior
So, here is the website I've built using bootstrap 4.
I have a big issue with the logo, as it keeps the same size on all devices.
I've tried adding img-fluid, but if I add this class, the logo shrinks so much on mobile phones, that it looks like a tiny dot. So I've removed this class. Now, on mobile, the hamburger moved on the second line and on the first line of the navbar is the 310 px logo that doesn't even show completly. I want to keep this spacing between the navbar elements as it now, but I think the problem that may be actually comes from my css:
.navbar .navbar-brand {
padding: 5px 200px;
}
.navbar-nav>li {
padding-left: 5px;
padding-right: 5px;
}
.navbar-nav>li {
margin-left: 5px;
margin-right: 5px;
}
This is my html:
<nav class="navbar navbar-light navbar-expand-xl fixed-top ">
<!-- Brand/logo -->
<a class="navbar-brand "> <img src="x" alt="logo" style="width: 310px"></a>
<button class="navbar-toggler" data-target="#collapsingNavbarLg" data- toggle="collapse" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbarLg">
<!-- Links -->
<ul class="navbar-nav float-right text-right pr-3">
<li class="nav-item">
<a class="nav-link py-0" href="/" style="font-size: 130%;">Home</a>
</li>
<li class="nav-item">
<a class="nav-link py-0" href="ChiSono" style="font-size:130%;">Chi Sono</a>
</li>
<li class="nav-item">
<a class="nav-link py-0" href="Servizi" style="font-size:130%;">Servizi</a>
</li>
<li class="nav-item">
<a class="nav-link py-0" href="Contattaci" style="font-size:130%;">Contattaci</a>
</li>
<li class="nav-item">
<a class="nav-link py-0" href="AreaClienti" style="font-size:130%;"> Area Clienti</a>
</li>
</ul>
</div>
</nav>
That 200px from padding also keeps the same, and maybe this is why I get all this issue. I am not sure. Also the space between the li elements, as I shrink the page until the point it becomes hamburger. But is there a way to still keep this spacing for my navbar elements, that also resizes? Or is there another way to fix this? Thank you!
I moved everything into a container so that you do not have to use 200px padding to move your logo. This lets the navigation sit similarly to the dimensions/look you had in your code without forcing the position of the elements.
This will let allow you to position your nav items to the right using a css class I added called .navbar-right.
But, because of the new positioning I added another media query to move the hamburger menu. (You may not need this in your coding environment because I was working straight off my desktop with just the CSS, also JS is not added to the example.)
Hope this helps.
.navbar-right {
position: absolute;
right: 0;
}
.relative {
position: relative;
}
#media only screen and (max-width:768px) {
.navbar-brand {
max-width: 100px;
}
/* below is for the demo but might help you position
the hamburger menu on mobile */
.navbar-toggler {
right: 0;
position: absolute;
margin: 10px;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container relative">
<div class="row">
<a class="navbar-brand" href="#">
<img class="img-fluid" src="http://www.studiopirrera.com/Images/ui.png" alt=" ">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav navbar-right">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
The best option would be to create diffenrent images files for different view port sizes.
With the srcset attribute, you can select which image should show in which case.
Here an example:
<img src="small.jpg" srcset="small.jpg 320w, medium.jpg 600w, large.jpg 900w" alt="my company">
You give the name/location of the image file, followed by a space and the view port size, when the image should show. It describes until which width (that's why it's w) the image should show. The example above translates to:
the small.jpg is shown until a view port width of 320px
the medium.jpg is shown until a view port width of 600px
the large.jpg is shown until a view port width of 900px
More detailed information can be found here: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
The positioning can be archieved by the information form brooksrelyt's answer
I solved this problem using an vw units width of image.
This allows the element's aspect ratio to be preserved, based on the viewport width
.navbar-brand img {
max-width: 11vw; /* find suitable value for you */
display: block;
width: 100%;
}
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.
I am struggling to get the mobile collapsed drop down nav to increase in height. Currently it is stuck at about 340px and I need it to expand to fit the menu items being contained within the collapsed nav. I have searched tirelessly on Google and here to find an answer but none of them seem to make an impact, even when I use !important.
Here's a screenshot of what I am talking about to avoid any confusion. The blue bordered area that I added to the screenshot is what I am talking about. This seems to be set to a static height and I need it to extend about another 50px-100px for this particular application. I did not show code here because I am hoping to just see the "best way" to change the default height for my future reference.
Thanks for the help!
EDIT: I did not submit code because right now it's just the default bootstrap nav code so I didn't think I needed to reference it.
Here's the code, I am just using a simple generic startbootstrap.com template here.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
I have no custom CSS yet as this is the first thing I am trying to change and don't know where in the CSS the dropdown nav should be edited.
Without seeing the code it is difficult to say what is impacting the height. If you add more <li>'s to the menu, does it expand?
If not, there could be a static height or max-height css property applied to the .dropdown-menu
Editing for improvement:
It looks like either of these elements;
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
has a height or max-height and overflow:auto property.
Inspect these elements in chrome to see if this is the case. Then, set height:auto; and/or adjust the max-height property to allow for increased height for that element.
You can set these in your custom CSS file and they will override Bootstrap's style. Just ensure that your CSS file is loaded after the Bootstrap CSS file.
If you can post a link I can look at it and provide the exact code needed to make the changes.
I had the same problem with my mobile collapsed drop-down navigation displaying a scrollbar rather than expanding to show all the navigation links. My solution was to hide the scrollbar then add pixels to the bottom of my data-target div.
You should be able to hide the scrollbar using:
.navbar-collapse.in {
overflow: hidden;
}
Then you can add the extra pixels needed at the bottom by adding padding to the data-target div when sized for mobile devices:
#media (max-width: 768px) {
.navbar-ex1-collapse {
padding-bottom: 50px;
}
}