How i could customize logo using bootstrap theme?
It looks small
Hi @kawahyu,
You can increase the size of the logo in the Bootstrap theme with the following CSS code:
.navbar-brand {
height: 100px;
}
You’ll notice that this can throw off the alignment of the nav menu and other things. Are you comfortable working with a Child Theme to extend the theme with custom code? If so, you’ll want to override the LESS variable @navbar-height
.
For instance, if you’ve loaded up your own child theme, the following example would override the @navbar-height
variable:
public function init() {
$this->modifyStyle('default', array('addLessVariables' => '@navbar-height:100px;'));
}
Hi @kawahyu,
in which file excactely this modification should be made as there is many CSS files in OJS?
.navbar-brand {
height: 100px;
}
Hi @vebaev,
The easiest way to add small bits of CSS code like this is to add a journal-specific CSS file under Settings > Website > Appearance > Journal Style Sheet. This file isn’t overwritten every time there’s an update to the application, so it’s the safest place to put small CSS changes.
If you plan to make a bunch of CSS changes, the best way to do this is with a child theme.
Hi,
I tried to increase the size of the logo in the Flatly theme with your code but nothing happened:
.navbar-brand {
height: 100px;
}
I added a journal-specific CSS file under Settings > Website > Appearance > Journal Style Sheet.
What else should I do?
Post a link to your site so that others can check to see if the new CSS code is being loaded.
Is this:
http://studio.ojs.lat/ojs302/index.php/rici/index
Thank you in advance for any help you can provide.
Looks like it’s a specificity issue. Try increasing the specificity with this code:
.navbar-header .navbar-brand {
height: 100px;
}
Try this navbar - Bootstrap 4 Simple Navbar with hover Example