I have a bootstrap navbar in my site but when it is shown collapse, if click on a link the menu does not close, and I would like navigate to the page and the menu will also be closed.
I've added
data-toggle="collapse" data-target="#navbarNav"
And do the trick, but the link have a strange effect when is not collapse (in a desktope mode)
I create a fiddle:
http://jsfiddle.net/soyjuanmedina/rscdu7gv/3/
An add the code to the link 'Home' and you can see (you need to expand the result window to see the menu not collapsed) and see when click in it the words disappear to appear again
This is happening because the menu when on desktop doesn't dissapear it just changes its layout so it will still try and collapse it.
If you just need a fix for this and don't mind it being a bit messy, here's what I came up with.
Have two elements, one that will be visible on mobile and one that will be visible on desktop like this (pay attention to the classes)
Mobile:
<a class="nav-link d-block d-md-none" href="#" data-toggle="collapse" data-target="#navbarSupportedContent">
Home
</a>
Desktop:
<a class="nav-link d-none d-md-block" href="#">
Home
</a>
So final result would be:
<li class="nav-item active">
<a class="nav-link d-none d-md-block" href="#">
Home
</a>
<a class="nav-link d-block d-md-none" href="#" data-toggle="collapse" data-target="#navbarSupportedContent">
Home
</a>
</li>
Related
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 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
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 designed a navbar with bootstrap4.in the right side of navbar I have my links.
when I place a drop left on the navbar, the drop left opens in the wrong place.
What is the problem?
my HTML:
<li class="nav-item dropleft">
<button class="btn bg-white nav-link text-dark dropdown-toggle" id="dd" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >MORE</button>
<div class="dropdown-menu" aria-labelledby="dd">
sadasd
</div>
</li>
This is What happens:
https://i.stack.imgur.com/Yakc3.png
This is a known issue in Bootstrap 4.0.0: https://github.com/twbs/bootstrap/issues/25304
As you can see in the comments, it's unknown if dropleft/right will be supported inside the navbar because of the way the popper.js positioning works.
This affects dropup, dropleft and dropright.
I am trying to populate my header with links. I have two dropdowns at the moment. I would like to populate the links using Umbraco and Razor, so nothing is hardcoded. This can be done quite easily (see code below), but populating the dropdowns is the tricky part.
I'm not sure how I would populate the dropdown in a good way. They are not subpages or anything like that, but they are simply dropdowns to make the header less wide. Here's how I populate my header using Razor by grabbing the links in Umbraco:
var home = CurrentPage.Site();
#foreach (var item in home.Children.Where("Visible"))
{
<li class="#(item.IsAncestorOrSelf(CurrentPage) ? "active" : null)">
#Umbraco.GetDictionaryValue(item.Name)
</li>
}
home.Children.Where("Visible") is simply grabbing all the child pages, where I have not checked the umbracoNaviHide.
This is currently how my header is created NOT using Umbraco (which I need to populate using the pages from Umbraco):
<nav class="navbar navbar-toggleable-lg navbar-light fixed-top">
<div class="d-flex align-items-center justify-content-between">
<button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand ml-3" href="/en">
<img src="logo.png" class="logo" alt="logo">
</a>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto justify-content-between full-width">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">About Us</a>
<a class="dropdown-item" href="#">History</a>
</div>
</li>
<li>
Our Products
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href id="navbarDropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Resources
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink2">
<a class="dropdown-item" href="#">Tips</a>
<a class="dropdown-item" href="#">News</a>
</div>
</li>
<li>
Contact Us
</li>
</ul>
</div>
</nav>
This will produce a result like this: https://codepen.io/anon/pen/QvyeRm
I don't want any of the links to be affected by this, as the links or pages doesn't really have anything to do with the header's layout. Here are some example URLs:
/en/about-us/
/en/history/
/en/our-products/
/en/tips/
I hope that makes sense.
Is there a good and easy way to do this?
There are a few ways that you could do this. the way I typically do main navigation on a site is to have a multiple content picker or similar to alow me to choose the items I want to show up in the navigation.
In your example, your sub-menu items aren't actually underneath the parent menu item. You could create a picker for each of the dropdowns, say on your home node, and choose the pages for each one?
If you plan to make the navigation more flexible though, you might need to do something a bit fancier, you could look at something like the Nested Content package to help you do this?
So I found a pretty good way of doing this. All I need to create is a content with document type set to Dropdown, then set the title (basically the label) and then add permissions for the children of the dropdown.
#foreach (var item in selection)
{
if (item.GetPropertyValue<bool>("showDropdown"))
{
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
#item.GetVortoValue("Title")
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
#foreach (var child in item.Children)
{
<a class="dropdown-item" href="#child.Url">#child.GetVortoValue("Title")</a>
}
</div>
</li>
}
else
{
<li>
#item.GetVortoValue("Title")
</li>
}
}
I started by creating a document type called "Dropdown". The sole purpose of this document type, is to be a parent for the pages inside the dropdown. Then I set the permissions to allow the two pages I have to be inside the dropdown, and I set the permissions on my Master to allow the dropdown document type.
Then I created a new property on the master document type, which is called "Show dropdown". If this is ticked, it will show the dropdown on the page. I had to do this, because pages with children (if(item.Children.Any())) would be true no matter what.