How to Adjust Your Brand’s Logo Size in BulmaCSS

Create a custom CSS file to hold some… custom CSS for the logo.

Adjust width and height of the navbar.logo class to fine tune your logo size on screen. The ones I’m using here made my logo look good both on desktop and mobile sizes without any other adjustments.

CSS
.navbar-brand .navbar-item {
    height: auto !important;
    padding: 0 !important;
}

.navbar-logo {
    width: 160px !important;
    height: 90px !important;
    max-height: 90px !important;
}

Now, reference that file in your HTML head tag after Bulma’s link so it will override Bulma classes as it loads.

HTML
 <link rel="stylesheet" href="assets/css/bulma.css">
 <link rel="stylesheet" href="assets/css/logo.css">

Remove width and height attributes from your SVG file and add the custom CSS class. Here is just a segment for reference.

HTML
<svg
    class="navbar-logo"
   viewBox="0 0 79.904165 25.4"
   version="1.1"

“Why are you sharing this in times of LMMs that can provide the solution after two or three prompts?”

Answer: because I have spent a full hour prompting GPT 3o with no success. Text + screenshots + code were not enough for it to provide a final solution. So after extra digging into CSS, I could get to this solution.

tags

, , , ,

Rodolpho Arruda