I am new with R, and I am trying to get a custom layout. I have my CSS.
Below is my code:
ui <- fluidPage(
theme="www/style.css" ,
suppressDependencies("bootstrap"),
tags$head(includeCSS("www/styles.css")),
HTML('<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
<div id="wrapper-top">
<ul class="navbar-nav ml-auto">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<li class="nav-item active mr-3">
<a class="nav-link acces" href="/">Link</a>
</li>
</div>
</ul>
</div>
</nav>'),
tags$footer( HTML("<footer class='sticky-footer' role='footer'>
<div class='container my-auto'>
<div class='copyright text-center my-auto'>
<span>©
2021
<a aria-label='' href=''>My footer</a>
</span>
</div>
</div>
</footer>")),
This gives me an output like this:
What I trying to achieve is to get the navigation below body tag currently it's all wrapped with this container-fluid class. And also I am trying to get the footer at the bottom of the page
Example:
Is there anyone that can help me with this? Thank you all
Related
How do you solve this issue where the navbar menu doesn't reveal downwards on medium sizes? It works fine on other screen sizes. I attached an Image here. I don't know what causes this, please help.
[ FIXED ]
The md in col-md apparently corresponded to its column on that particular breaking point. I thought it simply indicated what breaking point would cause it to collapse into seperate rows!
Removing the col-md-4 and making it col-lg-4 fixed the issue. Thank you, Overthane!
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="brand-column col-md-4">
<div class="navbar-brand">
<span>Plug</span>
</div>
</div>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse col-md-4" id="navbarContent">
<ul class="navbar-nav mx-auto d-flex align-items-center text-nowrap text-center">
<li class="nav-item active mx-1">
<a class="nav-link text-header">Home</a>
</li>
<li class="nav-item mx-1">
<a class="nav-link text-header">Solutions</a>
</li>
<li class="nav-item mx-1">
<a class="nav-link text-header">About Us</a>
</li>
<li class="nav-item mx-1">
<a class="btn btn-success btn-sm px-3 rounded-pill"> Login </a>
</li>
</ul>
</div>
</nav>
That's happening because the class .col-md-4 makes the .navbar-collapse element into a column with a size of 4 on medium screens (md). You should be able to achieve the desired effect by changing that element's classes to the following:
<div class="collapse navbar-collapse col-md-12 col-lg-4" id="navbarContent">
I'm having an issue with my Bootstrap v4.5.0 navbar. I want to use a logo as the navbar brand. I want it to be treated exactly as if it were HTML text. However, I can't seem to figure out how to replicate it. Note that my navbar has other items besides just the brand, and that for some reason, the img pushes the "Home" and "New Record" links all the way on the right side of the bar when these 2 items should be directly next to the logo. I've adjusted the padding and other CSS items to try to resolve this with no l When I shrink the window, I want the img to stay the same size, but as of now it shrinks. So, to recap, my 2 issues are: 1. incorrect padding of other navbar links next to logo, and 2. resizing of logo based on window size. I want to make the img behave as close to plain HTML text as possible. Thanks for any assistance! I've attached an image of my page to illustrate some problems. Notice the resizing of the logo as well as the incorrect placement of "Home" and "New Record".
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="/">
<img id="logo" alt="Logo" src="${contextRoot}/img/bcore-bride+AI.png" width=8% height=8% />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">Home</li>
<li class="nav-item">New Record</li>
</ul>
<ul class="navbar-nav ml-auto" style="float: right">
<li class="nav-item"><a class="nav-link" href="${contextRoot}/account">My Account</a></li>
</ul>
</div>
</nav>
The incorrect placement of home and new record is because of you put those into different tag from my account. And use margin left auto so it will get cover all the extra space and push your icon to the right.
I was able to get the desired outcome with the following:
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="/">
<img id="logo" alt="Logo" src="${contextRoot}/img/bcore-bride+AI.png" width="80" height="25" />
</a>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">Home</li>
<li class="nav-item">New Record</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="${contextRoot}/account">My Account</a></li>
</ul>
</div>
</nav>
I was able to hard set the logo to a certain pixel size (which I dislike the idea of for reasons of inflexibility). Also, I set ml-auto for the collapsible button and "My Account", and mr-auto for "Home" and "New Record".
This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 4 years ago.
I am working with the Bootstrap 4 default navbar and I just want to add a collapsing menu that is positioned on the right, not the left, when not collapsed.
I have tried adding text-right and float-right, but neither are actually moving the menu to the right.
Here is a bootply showing the issue.
Here also is a snippet, since StackOverflow wants me to use one, though I don't think it'll be wide enough to show the non-collapsed menu:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</button>
<div class="collapse navbar-collapse float-right">
<ul class="nav navbar-nav">
<li class="active nav-item">Home
</li>
<li class="nav-item">About
</li>
<li class="nav-item">Contact
</li>
</ul>
</div>
</div>
</div>
Add ml-auto class to ul tag containing menu
<ul class="nav navbar-nav ml-auto">
<li class="active nav-item">
Homes
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Contact
</li>
</ul>
The element .collapse.navbar-collapse requires .justify-content-end class as it is positioned with flex (display: flex) and takes full remaining width of your navbar.
The other answers with .ml-auto are perfectly valid. The difference between these two is that .justify-content-end will make all elements inside navbar-collapse stick to the right, whereas .ml-auto will only do the same for the ones inserted after your ul.nav.nav-bar, so the ones on the left can still stick to the left. You can choose the one most appropriate to you, and feel free to combine these two for more sophisticated layouts.
Your updated Boolply can be found here.
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</button>
<div class="collapse navbar-collapse justify-content-end">
<ul class="nav navbar-nav">
<li class="active nav-item">Home
</li>
<li class="nav-item">About
</li>
<li class="nav-item">Contact
</li>
</ul>
</div>
</div>
</div>
add .navbar-expand-md .navbar-collapse{
flex-direction: column-reverse;} in your style sheet. thanks
.navbar-expand-md .navbar-collapse{
flex-direction: column-reverse;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</button>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav ml-auto"> <!-- here -->
<li class="active nav-item">Home
</li>
<li class="nav-item">About
</li>
<li class="nav-item">Contact
</li>
</ul>
</div>
</div>
</div>
I want my navbar to scroll with the rest of the page.
I don't want any fancy style like disappearing i want it to be placed like other element of the page but i cant seem to achieve that with Bootstrap 4.
This is what it looks like:
It's hiding other elements.
<nav class="navbar navbar-expand-sm navbar-dark bg-dark" id="navbar-example">
<div class="container">
<div class="navbar-toggler" data-toggle="collapse" data-target="#menu">
<span class="navbar-toggler-icon"></span>
</div>
<div class="collapse navbar-collapse bg-dark" id="menu">
<ul class="nav ml-auto justify-content-center ">
<li>menu item 1 </li>
<li>menu item 2 </li>
<li>menu item 3 </li>
</ul>
</div>
</div>
</nav>
try adding style="position: relative !important;" to the html element.
I have to create a layout in which a content grid has to be on the full remaining page, but the layout has also a navigation bar.
In order to do this I decided to place the navigation bar in a flex container and the content in a row with height 100%. I need the content to fill the rest of the remaining space. The menu is dynamic so I can not know how the height of the navigation bar is.
However on smaller screens the navigation bar does not resize correctly. If the menu is expanded the menu is overlayed with the content.
<div class="container-fluid h-100 d-flex flex-column">
<nav class="navbar navbar-expand-sm s-navbar">
...
</nav>
<div class="row h-100">
...// content presented here
</div>
</div>
You can see it here
https://jsfiddle.net/ej9fd368/8/ that the last menu item is cut because of the yellow content.
My requirement is that the content should fill the rest of the page.
Instead of using h-100 on the yellow content area, add an extra CSS class to make it flex-grow:1 in height...
.flex-fill {
flex:1 1 auto;
}
https://www.codeply.com/go/xBAMfbHqbN
<div class="container-fluid h-100 d-flex flex-column">
<nav class="navbar navbar-expand-sm s-navbar">
<a class="brand navbar-brand" href="/">Brand</a>
<button class="navbar-toggler s-btn-hamburger order-first s-color-icons" aria-expanded="true" aria-controls="navbar-test" aria-label="Toggle navigation" type="button" data-target="#navbar-test" data-toggle="collapse">
<span class="navbar-toggler-icon k-icon k-icon-md k-i-hamburger"></span>
</button>
<div class="navbar-collapse s-menu-content collapse show" id="navbar-test">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown1" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown">Menu Item</a>
<div class="dropdown-menu" aria-labelledby="dropdown1">
<a class="dropdown-item" href="/Device">Sub menu</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/Test">Test</a>
</li>
</ul>
</div>
</nav>
<div class="row flex-fill">
<main class="col" style="background-color: yellow"></main>
</div>
</div>
Note: The flex-fill utility class will be included in the next Bootstrap 4.1 release:
https://github.com/twbs/bootstrap/commit/2137d61eacbd962ea41e16a492da8b1d1597d3d9
(Updated Bootstrap 4.1 demo)
Related question: Bootstrap 4: How to make the row stretch remaining height?