I'm currently working on a website project using bootstrap for the first time and am experiencing a little problem I think veterans like you can help me with :)
The website has a top menu bar (fixed) which change when displayed on a small screen (like a mobile phone) - with a toggle button that display a sidebar menu.
I'm just trying to get access to the CSS underneath that sidebar but can't modify it without modifiying the main manu bar as well.
I don't know which class CSS i have to create/modify to get what I need :/
<nav class="navbar navbar-default redq" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse">
and a litte below...
<!-- Collect the nav links, forms, and other content for toggling -->
<!-- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> -->
<div class="collapse navbar-collapse">
<a class="navbar-brand mobile pull-left" href="index.html#home" style="font-size:3vw;">MySite 2016</a>
<a class="mobile-menu-close"><i class="fa fa-chevron-right"></i></a>
<ul class="nav navbar-nav nav-list">
Any help or tip would be very much appreciated !
Thanks in advance for your help guys ;D
I identified the issue and hope it will be more understandable that my previous piece of code.
The goal is actually to change the collapse sidebar width but only on mobile version
Putting the style directly in the style attritube works perfectly
<div class="collapse navbar-collapse" style="width:100px;">
But if I try to put it in a CSS class definition, it doesn't work anymore
.collapse.navbar-collapse {
width: 100px;
}
Why is that happening !?
I really can't use the inline declaration because I need the use of #media in order to target only the mobile menu.
That's it, I found it !
I post here the answer for anyone looking for the same result :D
#mobile-menu-wrap
{
width: 10em;
}
This ID is found in script.js and give you full access to the sidebar (mobile) content ;)
Related
I'm having a problem with this ""fixed"" bottom navbar.
It is realized with bulma v0.8.0 and it I want it to always be visible in the same way (with or without scrolling).
Below code of the bottom navbar:
<html lang="en" class="has-navbar-fixed-bottom">
[...]
<nav id="navbar-bottom" class="navbar is-fixed-bottom is-hidden-tablet" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<div class="columns flex-center">
<div class="column socialtext">Share</div>
[...]
</div>
</div>
</nav>
And the results is like:
When I try to scroll down, the navbar show "correctly".
I have tried with some js library but still does not work.
Could I have some tips about that?
Thanks,
I have an issue with not being able to centre the display/position of the bootstrap enclosed sitemap menu when viewed on a mobile device.
Viewed on a PC the sitemap menu sits perfectly across the top of the page where it should, text-align and align-content in place and doing their respective jobs. However, at a certain breakpoint (768px) as I minimise and start dragging one edge of the screen to emulate a mobile device the toggle button replaces the navbar menu. So far so good.
Here is where the problem begins. Once I click on the toggle button to expand the collapsed menu, the menu sits about 20-30px in from the left side of the screen and will not centre until the screen is dragged down to its absolute minimum width when the menu is finally centred. Position: relative, absolute, left, right, centre, top, bottom, or any other combination seem to be ignored totally. It simply refuses to centre itself
Viewed on a smartphone the toggle button appears immediately as it should, but when clicked the resulting expanded menu also pulls left as it does on the PC as mentioned above.
I have tried using
• Position
• Pull-right
• Navbar-right
• Align-content
• Text-align
• Text-centre
With
• bootstrap.css / #media (min-width: 768px)
• bootstrap.min.css
• Site.css
And a fair amount of local and inline css coding, but it has all been to no avail. During the past four days I must have searched all the posts on here that deal with bootstrap navbar-collapse and even those which claim to utilise both sitemaps and bootstrap have <ul>, <li>, and ‘dropdowns/sub-menus’ in their code, none of which are relevant here.
Surely there must be a way to use a sitemap menu inside bootstrap and align the resulting menu without leaving all that white space to one side once it has been expanded, or why else would Visual Studio accept both?
Any help using a sitemap inside bootstrap navbar-collapse menu would be appreciated. I do not wish to alter the sitemap menu in its natural state as I said earlier, but alter the display of it once it has been expanded and no matter what I try I either get changes in the sitemap before collapse, before and after collapse, or no changes at all.
I am using the default bootstrap.css and bootstrap.min.css which comes with creating a .net web forms project using Microsoft Visual Studio 2015 enterprise
Here is my sitemap and bootstrap. If there is any further code required, please ask and I will provide.
HTML
<nav class="navbar navbar-default navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-right" id="myNavbar">
<asp:Menu ID="NavBar" runat="server" CssClass="nav" DataSourceID="SiteMapDataSource1" StaticEnableDefaultPopOutImage="False" Orientation="Horizontal">
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
</div>
</div>
</nav>
CSS (local)
.navbar-collapse .navbar-right {
height: auto;
align-content: center;
text-align: center;
font-size: 1.4em;
}
Minimised Screen tablet
Minimised Screen Mobile
To be honest I cannot find an answer anywhere although I am pretty sure it has to do with CSS so I have just stuck with convention and forgone the sitemap/bootstrap option altogether. Here is what I have done, and it works as needed. If anyone happens to stumble across this question in the future however and has a solution I would love to hear from you.
<div class="myNav">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-right" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Sword-Play</li>
<li>Meditation</li>
<li>Team Building</li>
<li>School Sessions</li>
<li>Core & Balance Work</li>
<li>Hollistic Counselling</li>
<li>In Action</li>
<li>Contact</li>
</ul>
<%--<asp:Menu ID="NavBar" runat="server" CssClass="nav" DataSourceID="SiteMapDataSource1"
StaticEnableDefaultPopOutImage="False" Orientation="Horizontal">
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />--%>
</div>
</div>
</nav>
I am new to this area.
I build a navbar with bootstrap 3 and the "load"-function. If I want to use the back button of the browser, it does not work.
What do I have to do to make it work?
Here my simplified code:
index.html:
<nav class="navbar navbar-inverse navbar-fixed-top text-center">
<div class="container">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Link1</li>
<li>Link2</li>
</ul>
</div>
</div>
</nav>
Thanks Schulz
There is no easy way to do this. You would have to use the history object and change the URL every time you click on something that you want to come back to later.
Basically on click you don't only load the remote content but also update the URL. You would also have to use a hash (#) in URL so the page won't refresh. This implies creating a routing mechanism for your app.
The issue I am having is getting both Scrollspy and a mobile menu to collapse when a link is clicked together. I can get the functionality of either one working by itself, but not together.
This snippet has scrollspy working, however, the mobile menu does not collapse when a linked is clicked.
<body data-spy="scroll" data-target="#mainNavbar">
<nav id="mainNavbar" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<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" href="#">Site Name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right" id="navbarCollapse">
<ul class="nav navbar-nav">
<li>About</li>
<li>Social</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</div>
</div>
</nav>
</body>
If I add the following to each anchor tag the mobile menu will collapse on click, but scrollspy breaks:
data-toggle="collapse" data-target=".navbar-collapse.in"
I'm assuming that using data-target is causing the issue, but I'm not sure how else to get around it.
Does anybody know of a way to get these two things to work together?
In searching other answers I was able to get both features to work by themselves, but I've yet been able to find something to assist in getting them working together. If I missed an answer, please point me in the right direction.
Thanks,
After further searching, it seems like using the data-toggle and data-target in the anchor tags breaks scrollspy. I've decided to use the following JS I found on another StackOverflow question for collapsing the mobile nav menu. This doesn't work with sub-menus it seems, but I'm not worried about that.
<script>
$('.navbar-collapse a').click(function (e) {
$('.navbar-collapse').collapse('toggle');
});
</script>
I'm trying to recreate collapsible Bootstrap responsive navbar with AngularStrap.
Here is plunker:
<div class="navbar navbar-inverse">
<div class="container" bs-collapse start-collapsed="true">
<div class="navbar-header">
<button class="navbar-toggle" type="button" bs-collapse-toggle>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div bs-collapse-target>
<ul class="nav navbar-nav">
<li>
Link
</li>
<li>
Link
</li>
</ul>
</div>
</div>
</div>
bs-collapse directive fits Bootstrap navbar quite easily, but it doesn't support collapsing animation out of the box.
How it can be done?
Is there a way to do this following Bootstrap workflow and utilizing its .collapsing animation instead of re-inventing the wheel (but simple LESS/SASS mixin that makes use of it is also fine)?
To get the animations working, you may need to include angular-motion AND the angular-motion.min.css file that's part of the angular-motion package. The reference to the CSS file isn't part of the main documentation. I'm pretty sure I found references to it here on StackOverflow when I had similar issues.