I'm developping an app in Rails 4 and I use bootstrap 2.3.2 with the bootstrap-twitter gem.
Here is my navbar:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">BRAND</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="divider-vertical"></li>
<li><%=t 'navbar.home'%></li>
<li><%=t 'navbar.applications'%></li>
<%if signed_in?%>
<% if current_user.admin == true %>
<li><%=t 'navbar.administration'%></li>
<%end%>
<%end%>
<li class="divider-vertical"></li>
<li><button class="btn navbar-btn btn-success" onclick="location.reload();location.href='/items/new'"><%=t 'navbar.share'%></button></li>
</ul>
<ul class="nav pull-right">
<% if user_signed_in? %>
<li><%= current_user.username %></li>
<li><a data-method="delete" href = "<%= destroy_user_session_path%>" rel="nofollow"><%=t 'navbar.signout'%> <i class="icon-off"></i></a><li>
<% else %>
<li><%=t 'navbar.signup'%></li>
<li><%=t 'navbar.signin'%></li>
<% end %>
<li class="dropdown">
<%=t 'navbar.language'%><b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="/home/setlanguage/en" method="get"><img src="/assets/United-Kingdom-flag-icon.png" class="iconic"> <%=t :english%></a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="/home/setlanguage/fr" method="get"><img src="/assets/France-Flag-icon.png" class="iconic"> <%=t :french%></a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
Sadly it doesn't collapse when I try to display it on a phone. I checked if the regular collapsable menus are working, and they do, so I guess that I'm supposed to have things set up properly. Therefore it must be an error in my code, but I can't find it.
Do you have any clue about what it might be?
I test your code in a static html web page and it works well.
1/ In your html head section, be sure you have included
bootstrap.min.css
bootstrap-responsive.css
jquery.min.js
bootstrap.min.js
2/ Does it works on a computer?
=> if yes: what is your mobile phone browser?
<!DOCTYPE html>
{%load staticfiles%}
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<link href = "{% static 'your_folder/css/bootstrap.min.css' %} " rel= "stylesheet" type = "text/css" media = "all">
<link href = "{% static 'your_folder/css/styles.css' %}" rel= "stylesheet" type = "text/css" media = "all">
</head>
<body>
<div class= "navbar navbar-inverse navbar-static-top">
<div class="container">
<ul class="nav nav-pills">
<button class = "navbar-toggle" data-toggle = "collaps" data-target = ".navHeaderCollapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<div class= "collapse navbar-collapse navHeaderCollapse">
<ul class= "nav navbar-nav navbar-left">
<ul class="nav nav-pills ">
<li > home </li>
</ul>
</ul>
</ul>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="{% static 'your_folder/js/bootstrap.min.js' %}"></script>
<script src="{% static 'your_folder/js/script.js' %}"></script>
</form>
</body>
</html>
This works for me if I minimize my browser and also in effective in mobile site.
Make sure you have downloaded bootstrap folder and fix into your project folder, I dont know much about ruby but I know a thing or two about Bootstrap, css and html.
Related
I've been trying for hours to understand what's happening here, but I didn't manage to understand.
I've written the html body for a navigation bar, which is shown below.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse">
<div class = "container-fluid">
<div class = "navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Segmentation Folks
</div>
<div class = "collapse navbar-collapse" id="navHeaderCollapse">
<ul class = "nav navbar-nav">
<li style="text-align: center;">Home</li>
<li style="text-align: center;">About</li>
<li style="text-align: center;">Contact</li>
<li style="text-align: center;">Sign in</li>
<li style="text-align: center;">Sign up</li>
</ul>
</div>
</div>
</nav>
When I open the html file from my computer, they all seem to be as I want.
But when I copied the html body to be an Angular component, the result is this. In addition the toggle button when the screen is small does not work, while in html it works.
Do you know why this happens? Thank you!
EDIT!
I have installed the bootstrap 3.3.6 and I have removed the scripts and link from this html. Then I included in the index.html below the the following:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
It seems that now it works!
Instead use links use cli to install bootstrap .
But to install 3.3.6 use this command:
npm install bootstrap#3.3.6
Here is working code
EDIT MAKE COLLAPSE WORK WITH ANGULAR
add in ts
collapsed:boolean=true;
html
<nav class="navbar navbar-inverse">
<div class = "container-fluid">
<div class = "navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse" (click)="collapsed = !collapsed;">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Segmentation Folks
</div>
<div class = "collapse navbar-collapse" id="navHeaderCollapse" [ngClass]="{'collapse': collapsed, 'navbar-collapse': true}">
<ul class = "nav navbar-nav">
<li style="text-align: center;">Home</li>
<li style="text-align: center;">About</li>
<li style="text-align: center;">Contact</li>
<li style="text-align: center;">Sign in</li>
<li style="text-align: center;">Sign up</li>
</ul>
</div>
</div>
</nav>
I've been having trouble getting my bootstrap toggle button to display menu items 'What We Do', 'About', or 'Contact' when clicked. It collapses properly but will not work when clicked.
I've played around with as many things as I know how to fix it, but cannot figure it out.
<!--Logo-->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ACS</a>
</div>
<!--Menu Items-->
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="">What We Do</li>
<li class="">About</li>
<li class="">Contact</li>
</ul>
</div>
</div>
The menu is not correctly linked to the button in your code. What is appearing as ACS is the link, however this link is not targeted at the menu, the button is.
I have included a snippet. You only need some minor changes to make it work.
(btw, I only noticed now, it uses bootstrap 3.36 - I created the snippet using jsbin originally using 'Bootstrap latest' library!)
.navbar-header button {
color: #337ab7;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div>
<div class="navbar-header">
<button type="button" class="navbar-toggle navbar-brand" data-toggle="collapse" data-target="#mainNavBar">ACS
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--Menu Items-->
<div id="mainNavBar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="">What We Do</li>
<li class="">About</li>
<li class="">Contact</li>
</ul>
</div>
</div>
You should always ensure that, when adding your script files or cdn, you put the jquery.js file or cdn link before the bootstrap.js file or cdn link.
You can read more on it on the official website of bootstrap: https://getbootstrap.com/docs/4.2/getting-started/introduction/
The menu drop downs for a brief second and then goes back up. Can anyone please help in fixing it? If someone could suggest me a code to make it work then that would be even better.
This is the code:
<nav class="navbar transparent navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target="#main_nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="index.html"> <strong>RESOLUTION ACCOUNTING</strong> </a>
<div id="main_nav" class="collapse nav-collapse">
<ul class="nav pull-right ">
<li>HOME</li>
<li>ABOUT US</li>
<li class="dropdown">
SERVICES <b class="caret"></b>
<ul class="dropdown-menu">
<li>Bookkeeping</li>
<li>Accounting</li>
<li>CFO Oversight</li>
<li>Equity Raises</li>
</ul>
</li>
<li>TESTIMONIALS</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
You are using Bootstrap version 2.3.2 CSS with Bootstrap version 3.3.6 Javascript. They are not compatible with each other. You need to use the same version of Bootstrap for both CSS and Javascript to get the correct behavior.
(It would have been helpful if you had included the URL to the site you need help with.)
Here you go with a solution https://jsfiddle.net/wqy986bt/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar transparent navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target="#main_nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="index.html"> <strong>RESOLUTION ACCOUNTING</strong> </a>
<div id="main_nav" class="collapse nav-collapse">
<ul class="nav pull-right ">
<li>HOME</li>
<li>ABOUT US</li>
<li class="dropdown">
SERVICES <b class="caret"></b>
<ul class="dropdown-menu">
<li>Bookkeeping</li>
<li>Accounting</li>
<li>CFO Oversight</li>
<li>Equity Raises</li>
</ul>
</li>
<li>TESTIMONIALS</li>
<li>CONTACT US</li>
</ul>
</div>
</div>
</div>
</nav>
There are few things:
You have an extra closing div at the end of your code
Check the ordering of the library file
bootstrap CSS
jQuery
bootstrap JS
I've used bootstrap v3.3.7 and jQuery v2.1.1 (in snippet) and jQuery v2.2.4 (in jsfiddle)
Hope this will help you.
I am using bootstrap navbar and I have a collapsible navbar. But I am facing a strange problem, whenever I am going to open my site on small devices i.e mobile phone or tablet (actually for which devices I need the collapsible navbar), it is by default opening the navbar. This should not happen. If I click on the navbar button (three line button) then only the navbar should expand. But my navbar is expanding first time by default on small devices.
Here is my code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header"><%= image_tag("logo.png", alt: "industryPrime") %></div>
<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 class="navbar-collapse collapse in" id="myNavbar">
<ul class="navigation pull-right">
<li class="dropdown">
<div class="dropdown">
<button id="feature_button" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" style="background-color: transparent; color: #51a3af; border: none; font-size:11px;">FEATURES
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Paperless purchase</li>
<li>Efficient stores</li>
<li>Peace of mind</li>
</ul>
</div>
</li>
<li>
<%= link_to "Case Study", user_maan_case_study_path %>
</li>
<li class="req_demo">
<%= link_to "Request Demo", user_request_demo_page_path , :onclick => "demo_clicked()" ,:onmouseover => "start_count()" , :onmouseout => "stop_count()" %>
</li>
<li id="Login button section"><%= link_to 'Login', {controller: 'sessions', action: 'new'} %></li>
<li>Contact Us</li>
<li><%= image_tag("contact_us.png") %>+91 98302-15353</li>
</ul>
</div>
</div>
</div>
</nav>
My website link is http://www.industryprime.com
please help me to fix it.
Thanks in advance!!!
Please remove class in in <div class="navbar-collapse collapse in" id="myNavbar"> . Hope it will help you.
I am a newbie to symfony 2, so i used the traditionnal way of including bootstrap css and js files, and i faced the problem that the navbar is not working in my twig view, the code is working on a normal php web site. So here is my code
{%block header%}
{{ parent() }}
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Ciné-tickets
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li><h1>test</h1></li>
<li>Accueil</li>
<li class="dropdown">
<a href = "" class="dropdown-toggle" data-toggle="dropdown">Categories
<i class="caret"></i>
</a>
<ul class="navbar-nav navbar-inverse dropdown-menu">
<li>Marocain</li>
<li>Americain</li>
<li>Egyptien</li>
<li>Indian</li>
</ul>
</li>
<li>Contact</li>
<li>se connecter || s'inscrire</li>
</ul>
</div> <!--fin collapse navbar-collapser-->
</div> <!--fin container-->
</div> <!--fin navbar navbar-inverse navbar-static-top-->
{%endblock%}
nothing show up even the :
<h1> TEST </h1>
Thank you
to dump assets in to web folder you will need to run few commands in the command promt from your working derectory when working in symfony
php ./app/console assets:install ./web --env=prod
php ./app/console assetic:dump --env=prod
for further guidance you check the documentation : http://symfony.com/blog/new-in-symfony-2-6-smarter-assets-install-command