CODEWITHSUNDEEP
cssrbootstrap-4shiny
adarvishian
adarvishian

Reputation: 175

Logo in navbar using bootstrap and R

I'm building out an R Shiny application using Bootstrap to handle the styling. I'd like the logo to be placed within the navbar, right aligned. Looking through bootstrap documentation, it should go something like this:

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
   <a class="navbar-brand" href="#">
     <img src="bird.jpg" alt="Logo" style="width:40px;">
   </a>
  ...
</nav>

This is what my .css file looks like and how I think implementation should go:

.navbar-brand{
  background-image: url(www/logo.png);
  align: right;

 }

I'm not familiar with styling or bootstrap, here is what a snippet of the bootstrap.css file looks like:

bootstrap.css snippet

Upvotes: 1

Views: 188

Answers (1)

St&#233;phane Laurent
St&#233;phane Laurent

Reputation: 84529

I do like this, with logo.png in the www folder:

.logo {
  text-decoration: none;
  border: 0;
  width: 50px;
  height: 50px;
  margin: 0;
  top: 3px;
  right: 15px;
  background: url(logo.png) no-repeat 0 0;
  background-size: 46px 46px;
  position: absolute;
  z-index: 100000000;
}

and in ui.R: 

tags$head(
    tags$a(class="logo", target="_blank",
           href="http://link.com/")
)

Upvotes: 1

Related Questions