I have a navbar partial in views/layouts in Rails app. It is always in this collapsed state, and not even in the right form of collapsing. What am I doing wrong with the code?
https://january-app.herokuapp.com/users
Updated the version syntax with a little bit success. Still doesn't work right though.
You need to add navbar in your , so correct version will be , please check it below, an vote right answer please
<div class="navbar navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="true">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
Related
I'm trying to make this button, link to a specific URL but I don't know where to add it in the code of the button, I'm using bootstrap 4.3, thank you!
Code
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-align-right text-light"></i>
</button>
Add onclick="location.href='{url goes here}'" to your button tag.
Working example
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" onclick="location.href='https://stackoverflow.com'">
<i class="fas fa-align-right text-light"></i> Go to Stackoverflow
</button>
I can't quite figure out why the navbar is doing this, but I think it started from when I added the collapsable functionality for mobile devices to it. Now, whichever size the screen is the navbar adds on an extra 10px or so to the screen width, creating an awkward gap on the right side of the screen. I thought this could be something to do with the containers, but removing this or changing position has no effect. I also tried:
margin-right: 0px !important;
margin-left: 0px !important;
But this made no difference. The navbar currently looks like this:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- 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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About Me</li>
<li>C.V.</li>
<li>Personal projects</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
I really can't figure out why this is happening, so would be grateful for help, thanks :-)
It was simply because I hadn't used bootstrap containers correctly. All fixed! :-)
According to this doc: http://grailsrocks.github.io/grails-platform-core/guide/nav.html
You should be able to put the following in your main layout:
<nav:primary/>
<nav:secondary/>
and it should magically add all your controllers according to the docs:
To get you started quickly, all your controllers will be
automatically registered in the "app" scope and each controller has
sub-items for each of it actions.
How to reproduce:
created an app with grails create-app
added a domain object with grails create-domain-class Address
added a few string fields to the Address class.
created a scaffolded controller thus:
class AddressController {
static scaffold = Address
}
edited the /views/layouts/main.gsp thusly:
</head>
<body>
<nav:primary/>
<nav:secondary/>
<!---
<div class="navbar navbar-default navbar-static-top" role="navigation">
<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="icon-bar"></span>
</button>
<a class="navbar-brand" href="/#">
<asset:image src="grails.svg" alt="Grails Logo"/>
</a>
</div>
<div class="navbar-collapse collapse" aria-expanded="false" style="height: 0.8px;">
<ul class="nav navbar-nav navbar-right">
<g:pageProperty name="page.nav" />
</ul>
</div>
</div>
</div>
---!>
<g:layoutBody/>
<div class="footer" role="contentinfo"></div>
Ran the app. The result was just a blank navigation, and the nav tags were unaltered in the resultant page in the browser.
I also tried doing "grails generate-all Address" to create the static view and controller, and I added the following line in the controller:
static navigationScope = 'app'
But this had no effect either.
I have strange error with images (never encountered it before).
This is screenshot of the main page - <%= render 'layouts/header %>
Nothing wrong there...
Now - I have put same code (<%= render 'layouts/header %>) into devise/sessions/new.html.erb and it does not read logos anymore.
(same happens with footer)
-> How to fix this?
-> How to prevent it in future?
I thought that rails will always load images the same way it does every time.
header.html.erb
<header id="home">
<div class="main-nav">
<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="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<h1><img class="img-responsive" src="assets/logo.png" alt="logo"></h1>
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="scroll active">Home</li>
</ul>
</div>
</div>
</div><!--/#main-nav-->
Fixed
Problem was that I should have used image_tag instead of standard html img src.
So:
This:
<img class="img-responsive" src="assets/logo.png" alt="logo">
Should be changed to this:
<%= image_tag("logo.png") %>
I have the following snippet. I am unable to toggle the data values in smaller resolution though the button appears on the scree. No data has been displayed when I click on toggle button.
<div class="container">
<nav class="navbar navbar-default" 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=".navbar-headerdata-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-headerdata-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">About Us</li>
<li>Contact Us</li>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</form>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
Can someone help resolving the issue?
Thanks
This was just because of improper linking of bootstrap JS.!