By default the links in the dropdown for the mobile container are on the left (as shown below):
Is there a way to get them to show up on the right and not the left? I tried using text-align:right; but it's not showing up clean:
You can create your own class, for example .align-right and add it to the .nav-collapse container to align the links to the right. This way your changes won't affect the other elements that rely on that class on the bootstrap stylsheet. Try this:
.nav-collapse.align-right {
text-align:right;
}
Then you can do this:
<div class="nav-collapse align-right"> ..links.. </div>
And your links will be placed on the right side instead.
Demo: http://jsfiddle.net/PWFSX/
From Bootstrap documentation:
http://getbootstrap.com/components/#navbar
You have to use these classes "navbar-form navbar-left
I used them like that:
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data- toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="span10"></span>
</button>
<%= link_to 'Home', root_path, class: 'navbar-brand' %>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<%= render 'layouts/navigation_links' %>
</ul>
<ul class='nav navbar-nav navbar-right'>
<% if user_signed_in? %>
<li><%= link_to 'Sign out', destroy_user_session_path, :method => :delete %></li>
<% else %>
<li><%= link_to 'Sing in', new_user_session_path %> </li>
<% end %>
</ul>
</div>
</div>
Related
Rails js load issue Turbolinks gem.
Navbar Dropdown one click not open after page refresh or second click to open dropdown how to solve this isssue. and also kuse turbolinks gem and boostrap gem.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<% if current_user.present? %>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<% Tabs::NAVBAR.each do|tab_key, tab|%>
<% if tab[:type].eql?('dropdown_tab') %>
<li class="nav-item dropdown <%= active_navbar(tab_key) %>">
<% if current_user.projects.present? %>
<%= link_to tab[:title], fetch_route(tab_key), class: 'nav-link dropdown-toggle', id: 'myTab', data: { toggle: "dropdown" }%>
<%else%>
<%end%>
<div class="dropdown-menu">
<% dropdown_options(tab_key).each do|option| %>
<%= link_to option[:title], option[:path], class:'dropdown-item' %>
<% end %>
</div>
</li>
<% else %>
<li class="nav-item <%= active_navbar(tab_key) %>">
<%= link_to tab[:title], fetch_route(tab_key), class: 'nav-link'%>
</li>
<% end %>
<% end %>
</ul>
<div class="dropdown">
Profile <b class="caret"></b>
<div class="dropdown-menu dropdown-menu-right">
<li><%= link_to " Profile", edit_user_registration_path, class: "dropdown-item" %></li>
<li><%= link_to " Sign Out", destroy_user_session_path, method: :delete, class: "dropdown-item" %></li>
</div>
</div>
<%end%>
</div>
</nav>
I think you need to reinitialize the elements that requires bootstrap js when the event turbolinks:load is fired, check this question Rails Bootstrap 4 with Turbolinks
It's about the tooltip js, but the same applies for any element that requires js initialization.
Something like:
$(document).on('turbolinks:load', function() {
$('.dropdown-toggle').dropdown()
})
May be you need Dropdown.parseDocument(element) or Bulma(element).dropdown() in turbolinks:load event when used #vizuaalog/bulmajs.
// global `bulmaOptions` object should be defined before BulmaJS has loaded
// disable autoParse to prevent repeated `turbolinks:load` event
window.bulmaOptions = {
autoParseDocument: false
}
// import Dropdown from '#vizuaalog/bulmajs/src/plugins/dropdown';
import Bulma from "#vizuaalog/bulmajs";
document.addEventListener("turbolinks:load", () => {
Bulma.parseDocument();
// Dropdown.parseDocument(document.getElementsByTagName('body')[0]);
Array.from(document.querySelectorAll('.dropdown')).forEach(element => {
Bulma(element).dropdown();
});
});
Note: bulmaOptions.autoParseDocument = false
so I'm a total newbie, please do bear with me.
I'm following a course online where the instructor shows navbar appearing on homepage root path but also on other pages like the posts page. I followed exactly his instructions, but for some reason the navbar which is a partial, is only appearing on the homepage but NOT on the posts page - the code for navbar is as follow and the code for the other pages are all on https://github.com/cheese1884/-mywebsite
Thanks, guys.
<div class='container'>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<%= link_to "LessonRoll", root_path, class: 'navbar-brand' %>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor03">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<%= link_to 'Home', root_path, class: 'nav-link' %>
</li>
<li class="nav-item">
<%= link_to 'Posts', posts_path, class: 'nav-link' %>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<% if current_user %>
<li class="nav-item dropdown">
<a class = "nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="download">Admin Menu<span class="caret"></span></a>
<div class="dropdown-menu" aria-labelledby="download">
<%= link_to "App Settings", app_setting_path(#app_setting), class: 'dropdown-item' %>
<div class="dropdown-divider"></div>
Link
</div>
</li>
<% end %>
</ul>
<ul class="nav navbar-nav ml-auto">
<% if !current_user %>
<li class="nav-item">
<%= link_to "Sign Up", new_user_registration_path, class: 'nav-link' %>
</li>
<li><%= link_to "Log In", new_user_session_path, class: 'nav-link' %>
</li>
<% else %>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="download"><%= current_user.username if current_user %> <span class="caret"></span></a>
<div class="dropdown-menu" aria-labelledby="download">
<%= link_to "Edit Profile", edit_user_registration_path, class: 'dropdown-item' %>
<div class="dropdown-divider"></div>
<%= link_to "Log Out", destroy_user_session_path, method: :delete, class: 'dropdown-item' %>
</div>
</li>
<% end %>
</ul>
</div>
</nav>
</div>
In your yeti.html.erb, you need to put the navbar outside the yield section:
<body>
<%= render partial: 'navbar' %> <!-- or code for navbar -->
<div>
<%= yield %>
</div>
</body>
Edit : multiple layouts explaination
Rails uses a simple convention to find the correct layout for your
request. If you have a controller called ProductsController, Rails
will see whether there is a layout for that controller at
layouts/products.html.erb. If it can't find a layout specific to your controller, it'll use the default layout at app/views/layouts/application.html.erb.
(source)
In your case you can add a custom layout such as yeti.html.erb and specify your PostsController to use this layout with layout 'yeti'
Why the navbar is appearing on homepage but not on post page (original question)
Because as i answered above, you need to add the navbar partial inside the yeti.html.erb layout same as you did in the application.html.erb layout.
Why the navbar design is different
Because in application layout you link the application.scss stylesheet which only imports bootstrap (here)
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
In the yeti layout, you link yeti/theme_manifest.scss as stylesheet which imports both "bootstrap" and the overriding "theme" (here)
<%= stylesheet_link_tag 'yeti/theme_manifest', media: 'all', 'data-turbolinks-track': 'reload' %>
I hope this will help you to see more clearly.
I am a new learner and I am confused using bootstrap code in rails, here is the example of the code:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to "MARKET", root_path, class: "navbar-brand",id: "logo"%>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<% if user_signed_in? %>
<li><%= link_to "create doc", new_detail_path%></li>
<li><%= link_to "Signout", destroy_user_session_path, method: :delete %></li>
else
<li><%= link_to "login", new_user_session_path%></li>
<% end %>
</ul>
</div>
</div>
</nav>
I know the user part ul is wrong, I don't know how to use bootstrap in rails.
Is there any tutorial to learn bootstrap with rails because I am really confused to use bootstrap in rails.
Here the article how to integrate bootstrap in rails app:
https://launchschool.com/blog/integrating-rails-and-bootstrap-part-1
Sorry for the newbie question, but can anyone see what I'm doing wrong? I followed the directions on the bootstrap website, and am unable to create a collapsing navbar in my web app. The list items under the ="nav pull-right" won't collapse when I decrease the width of the window. I think this maybe because I don't have a collapse plugin in my bootstrap.js. Could that be the issue?
<%= link_to "Catalyst", users_path, class: "brand" %>
<header class="navbar navbar-fixed-top navbar-inverse">
<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>
</a>
<%= link_to "Webapp", users_path, class: "brand" %>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li><%= link_to current_user.full_name, current_user %></li>
<li id="fat-menu" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Mailbox
<% if unread_count > 0 %>
(<%= unread_count %>)
<% end %>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><%= link_to "Received", messages_path %></li>
<li><%= link_to "Sent", sent_messages_path %></li>
</ul>
</li>
<li><%= link_to "Sign out", destroy_user_session_path, :method => :delete %></li>
</ul>
</div>
</div>
</div>
</header>
Change <div class="nav-collapse collapse"> to <div class="navbar-collapse collapse">
Helo,
New to bootstrap and trying to use it with rails. I am trying to create a navbar and trying to display a link to the extreme right of the navbar which is not working. Here is my code:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">
<%= link_to "Rubyblog", root_path, :class => 'brand' %>
</li>
<li>
Edit Account
</li>
<li>
Categories
</li>
<ul class = "nav pull-right">
Current User
</ul>
</ul>
</div>
I am trying to display the last link "Current User" to the extreme right of the navbar. Using div class"nav pull-right" doesn't seem to work: http://i.imgur.com/BEBcaIc.png
Please let me know what I am missing/doing wrong. Appreciate your inputs.
Thanks!
Mike
EDIT: Answering my question:
Pulled the "nav pull-right" out of the main "nav" class tag and it worked. Updated code:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">
<%= link_to "Rubyblog", root_path, :class => 'brand' %>
</li>
<% if user_signed_in? %>
<li>
<%= link_to 'Edit Account', edit_user_registration_path %>
</li>
<li>
<%= link_to 'Categories', categories_path %>
</li>
<% if current_user.has_role? :admin %>
<li>
<%= link_to 'Users', users_path %>
</li>
<%end%>
<%else%>
<li>
<%= link_to 'Sign up', new_user_registration_path %>
</li>
<% end %>
</ul>
<ul class = "nav pull-right">
<li><%= link_to 'Welcome, '+current_user.name, edit_user_registration_path %></li>
</ul>
EDIT: Answering my question:
Pulled the "nav pull-right" out of the main "nav" class tag and it worked. Updated code in the EDIT section of my question
Have you tried making your current user like the following:
<li class="pull-right">
Current User
</li>
I'm pretty sure the reason it's losing it's styling is because you are nesting nav inside a nav.
I think you want to divide the navbar into navbar-left and navbar-right:
<nav class="navbar navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="navbar-inner">
<ul class="nav navbar-nav">
<li class="active">
<%= link_to "Rubyblog", root_path, :class => 'brand' %>
</li>
<li>
Edit Account
</li>
<li>
Categories
</li>
</ul>
<ul class = "nav navbar-nav navbar-right">
Current User
</ul>
</div>
</div>
</nav>
The bootstrap docs talk about this and say they're a bit different than pull-right - this might explain why you're seeing issues. I haven't tested the above, but it's likely a good start.