Customize the logo height in your shinydashboard header title

I have written the following code to create a dashboard:

library(shinydashboard)
library(shiny)
library(fresh)
mytheme <- create_theme(
  adminlte_color(
    light_blue = "#004e70"
  ),
  adminlte_sidebar(
    width = "400px",
    dark_bg = "#3c3b3b",
    dark_hover_bg = "#004e70",
    dark_color = "white"
  )
)

Header <- dashboardHeader(
  title = "Labor Market Discrimination in Ecuador",
  titleWidth = 450,
  tags$li(a(img(src = "BID_Blanco.png",
                title = "IDB Logo", height = "60px"),
            tags$style(".sidebar-toggle {height: 70px; padding-top:10px; padding-botton:10px;")),
          class = "dropdown")
)

Tabs <- dashboardSidebar(
  tags$style(".left-side, .main-sidebar {padding-top: 70px}"),
  sidebarMenu(
    menuItem("General", tabName = "general"),
    menuItem("Trial", tabName = "by_trial"),
    menuItem("Sex", tabName = "by_ss")
  )
)

Body <- dashboardBody(
  use_theme(mytheme),
  tabItems(
    tabItem(tabName = "general"),
    tabItem(tabName = "by_trial"),
    tabItem(tabName = "by_ss")
  )
)

ui <- dashboardPage(
  Header, 
  Tabs,
  Body
)

shinyApp(ui, server)

This code generates the following output:

https://i.sstatic.net/Z8w27.png

How can I increase the height of the title section (where it says "Labor Market Discrimination in Ecuador") to match the height of the blue bar where the logo is displayed?

Additionally, how can I remove the black space above the tabs section (right above "General")? This is one of my first shinydashboards, so I'm a little uncertain.

Answer №1

To ensure the proper display of the logo, it is important to define a specific height for the .logo span. Be sure to accurately target the <span> element to guarantee that your styling rule will be effective:

Body <- dashboardBody(
  use_theme(mytheme),
  tags$head(
    tags$style("
       .left-side, .main-sidebar {
          padding-top: 70px;
       }
       .skin-blue .main-header .logo {
          height: 70px; 
          display: inline-flex;
          align-items: center;
       }")
     ),
  tabItems(
    tabItem(tabName = "general"),
    tabItem(tabName = "by_trial"),
    tabItem(tabName = "by_ss")
  )
)

https://i.sstatic.net/TZsQC.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust the image's height to adapt to the size of the browser

I'm having trouble resizing the images to match the height of the browser window. My goal is to limit the images' height to a maximum of 1100px and have them scale down based on the height of the browser. I've experimented with setting the ...

Train various regressions using the Caret R Package for model fitting

I am looking to apply various models to a single dataset using the Caret R Package. The dependent variable in my data is continuous and quantitative, while the independent variables are binary categorical (absent vs. present). Each row represents an indiv ...

Aligning elements vertically in Bootstrap 4 with the power of flexbox

Seeking assistance with a frustrating issue in Bootstrap 4: I tried to implement the align-self-start flexbox alignment using the code from this page . However, the example provided on that page does not seem to work. Is there a simpler way to achieve the ...

Struggling with certain CSS design elements

I'm encountering some CSS styling issues. The button in my form remains perfectly positioned when I resize the window, but the inputs are moving around. Why is this happening? Also, when a button is pushed, a h2 element with a little arrow needs to b ...

Guide on adding a parent class to style all generated CSS rules in styled-components 5.3.5

When my application loads into a parent div with a specific class (for example, .my-app), is there a way to add the prefix .my-app to all classes generated by styled-components? For instance, consider a component like this: import React from 'react& ...

Incorporate additional rows into a data frame by using the data from a specific column

The current format of the data-frame is shown below: Scenario Month A B C 1 1 -0.593186301 1.045550808 -0.593816304 1 2 0.178626141 2.043084432 0.111370583 1 3 1.205779717 -0. ...

Counting simultaneous calls in R programming language

Seeking a way to measure the number of simultaneous calls on a telephony system using R and a CSV file. Similar to this SQL example, but tailored for R and Windows environment. If given a CSV file with columns: Id (numeric), TimeOfCall(POSIXct), TimeOfClo ...

Strange occurrences with the IMG tag

There seems to be an issue with my IMG element on the webpage. Even though I have set the height and width to 100%, there is some extra space at the end of the image. You can view the problem here: I have also included a screenshot from the developer too ...

Switching the horizontal tab design from Bootstrap 3 to Bootstrap 4

I'm currently working on adapting a code snippet from bootsnip that creates horizontal Bootstrap tabs with material-style design. I've encountered some challenges in converting it to Bootstrap 4, specifically in updating the CSS to use .nav-item ...

How to position text to the left, center, or right with CSS, HTML, using span, text align, and inline-block styling

I have 4 boxes. In one of the boxes, I have placed 3 smaller boxes and I want to align them to the left, center, and right while still keeping them on the same line. I've attempted using inline-block, but it doesn't seem to be working properly. C ...

Leveraging this jQuery code across multiple div elements

As a newcomer to jQuery, I am currently experimenting with a test script. My goal is to create an effect where when an image is clicked, a div slides down displaying more information similar to the new google images effect. The issue with the current scri ...

Utilizing asset URLs in style binding with Vite: A comprehensive guide

Is anyone else experiencing issues with displaying a background image from the assets folder? I am currently using an image tag and it appears properly, but when I attempt to use the background-image style, I receive a 404 error. I am utilizing Vue 3 with ...

Modifying an image's height and width attributes with jQuery and CSS on click action

I'm currently developing a basic gallery using HTML, CSS, and jQuery. The objective is to have a larger version of an image display in a frame with an overlay when the user clicks on it. While this works flawlessly for horizontally-oriented images, ve ...

Minimize() along with... (ellipsis)

Following advice from Hadley's book Advanced R, I am attempting to create a recursive version of a merger function using Reduce(). However, instead of working with a vector of numbers, I am looking to handle multiple arguments using the ellipsis (...) ...

Hidden input field when inactive

Whenever I start typing in my input form, the text disappears after a moment. The only way to prevent this is by continuously pressing on a letter key on my keyboard. This issue began after I added a resizeInput attribute that adjusts the size of the inpu ...

Content positioned beside an image with the help of Bootstrap 4 framework

How can I align text to the right of an image, like a table layout? I experimented with grid layout using <div class="span2"> and <div class="span10"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bo ...

Optimal method for tallying instances in one column depending on another column

I am working with a dataframe that contains 4500 observations and 12 variables. The data is organized as follows: Column 1 (n1) consists of integer values (10, 30, or 70), column 2 (n2) also consists of integer values (10, 30, or 70), and column 4 (mean2 ...

Employ CSS to target the initial and final items within sets of identical elements

I created the following CSS styles: div { width: 300px; text-align: center; } p:not(.vrt) { text-align: left; } p.vrt { writing-mode: vertical-rl; display: inline-block; } div :nth-child(1 of p.vrt) { margin-left: 0; } div :nth-last-child(1 of ...

Thumbnails on the grid are vertically aligned to the top

How can I vertically align grid items at the top without manually setting grid span properties for li elements? I need the layout to be flexible and work for any number of list elements. ul { position: absolute; left: 0; top: 0; width: 400px; ...

In ggplot, mismatched scales with continuous color values and discrete categories

When plotting points over a heat map created in ggplot2, I encountered an issue. The data frame delta contains the points to be plotted on top of the heat map, and the variable plt holds the ggplot image. To generate the heat map itself, I used code from ...