The navigation bar is smaller in size compared to the brand logo

Is there a way to create a larger navbar-brand (bootstrap 4) that overlaps the navbar itself, instead of increasing the height of the navbar to fit the brand?

https://i.sstatic.net/5H4UM.png

This is what my HTML currently looks like:

    <nav class="navbar navbar-expand-lg navbar-custom fixed-top top-menu-4">
    <div class="container">
        <div class="navbar-brand">
            <img src="https://via.placeholder.com/350x170.png" width="350px" height="170px" alt="">
        </div>
        <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
            aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="none.html">Example 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="none.html">Example 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="none.html">Example 3</a>
                </li>
            </ul>
        </div>

    </div>
</nav>

What I'm trying to achieve is an overlap effect, similar to this image:

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

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To ensure a consistent height for the .navbar, set it to a fixed value and apply a transform to the .navbar-brand element

.navbar {
  height: 100px;
  background-color: rgba(255, 255,255, 0.9);
}

.navbar-brand {
  transform: translateY(calc(50% - 30px));
}

Check out the fiddle here

Answer №2

To ensure the .navbar maintains a fixed height, simply set it to a specific value and utilize flexbox on the .container to align the .nav-brand element at the top.

Refer below for more details:

.navbar .container {
height: 100px; /* adjust this according to your preference */ 
}

.navbar-brand {
  align-self: flex-start;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-custom fixed-top top-menu-4">
    <div class="container">
        <div class="navbar-brand">
            <img src="https://via.placeholder.com/350x170.png" width="350px" height="170px" alt="">
        </div>
        <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
            aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="none.html">Example 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="none.html">Example 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="none.html">Example 3</a>
                </li>
            </ul>
        </div>

    </div>
</nav>

Answer №3

To achieve the desired layout, it is recommended to use absolute positioning for your image element.

.navbar-brand img {
    position: absolute;
    top: 10px;
    left: 30px;
    max-height: 100px;
    object-fit: contain;
}

Answer №4

To achieve a fixed position for the navbar-brand, you can use the following CSS code:

.navbar-brand {
    top: 0;
    position: absolute;
}

Check out the live demo here: https://www.example.com/code-demo

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

showcase 7 content sections in a two-column layout

I have a large container with 7 smaller containers inside <div id="big_div"> <div>a</div> <div>a</div> <div>a</div> <div>b</div> <div>b</div> <div>b</div><div>b</d ...

csshtmllayout

Having Trouble with Navbar Toggler Functionality in Bootstrap 5

I'm currently working on a responsive webpage using Bootstrap 5, and I've encountered an issue with the Navbar. The toggle button isn't functioning properly – nothing happens when clicked. I've tried looking through the official docu ...

csstwitter-bootstrapnavbarbootstrap-5

Creating HTML tags using Kotlin

Looking to generate HTML using Kotlin in the browser, I experimented with the Kotlinx library. However, I found that it lacks support for callbacks like the following: div { onclick = { event -> window.alert("Kotlin!") } } Are there an ...

javascripthtmlkotlinkotlinx-html

Searching and extracting HTML tags using DomCrawler

Trying to extract text content from HTML tags using the Symfony DomCrawler <html> <strong> This is a bold text </strong> <strong> This is another bold text </strong> <h2> This is header 2 text </h2> </htm ...

phphtmlsymfonyweb-scrapingdomcrawler

Display numerical data at precise locations above an image

Currently, I am working on a project where I am adding multiple marker pins to an image and saving their positions (x and y coordinates) to a database for later use. To see the code I have written so far, you can visit this link: https://jsfiddle.net/at3w ...

javascriptjqueryhtml

Compatibility of Bootstrap 4 with collapsible elements and display utilities

I have noticed an issue with Bootstrap 4 display utilities not functioning properly with the .collapse class, a feature that worked seamlessly with Bootstrap 3. Despite my efforts to research this problem, I have been unable to find similar inquiries regar ...

htmlcssbootstrap-4display

Incorporating a background-image to enhance the appearance of checkboxes

I am attempting to set up checkboxes that will display different images when checked and unchecked. Below are the checkboxes I am currently using: <input type="checkbox" name="fordCheckBox" value="Ford"> To assign background images to each checkbox ...

htmlcsscheckbox

Instructions for capturing multi-dimensional arrays using forms in Vue

I have a snippet of code that looks like this: <div class="form-item"> <label for="list-0"><?php _e('List 0', 'test'); ?></label> <input name="list[0]" type="text" id="list-0" value=""> </div> &l ...

javascripthtmlformsvue.js

Sending a request to the Github API using HTTP

Currently I am working on a project to create a web application using C# that can search for users with Github accounts. However, I am unsure where to begin as I prefer not to use frameworks like Octokit and want everything done in C#. Could someone provi ...

c#htmlasp.netgithub

The elements are out of sync and not properly aligned

Having trouble creating a navbar and encountering two issues. The search text bar's width is not 100%, it should fill the width to 100% of its column. The Glyphicons are not vertically aligned. For reference, you can check out this JSFiddle link A ...

jqueryhtmlcsstwitter-bootstrap

Guide to sending an HTML form via email

This is the form that I am working with: <form class="contact-form" method="post" action="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5c1d7c091969494e5c2c8c4ccc98bc6cac8">[email protected]</a>"> ...

phphtmlformsemail

Can we incorporate various CSS libraries for individual components on our React site?

Let's say, I want to use different CSS libraries for each of my components - Home, About, Contact. Would it be feasible to utilize material ui for Home, semantic ui for About, and bootstrap for Contact? If so, what is the process for incorporating t ...

javascriptcssreactjsmaterial-uisemantic-ui

Make sure to have the list available while choosing an item

I want to design a unique CSS element with the following characteristics: Include a button. When the button is clicked, a list of items (like a dropdown list) should appear. We should be able to select items by clicking on them, and the parent component s ...

cssreactjsdrop-down-menufluent-uifluentui-react

What is the best way to interact with all the rendered DOM elements in React that were created using the map method

return <div> <div >{'Audios'}</div> {urls.map(url => <div > <audio controls src={url} ref={(element) => this.audioRefs.push(element)} /> </div>)} </div>; I a ...

javascripthtmlreactjsfrontend

Guide to animate the appearance of a div from a specific location

I have a div that smoothly slides out when a label is hovered over. HTML: <div class="cellDataViewTdmStatus divCell userSitesCol7"> <label class="lblViewTdmStatus">View Status</label> </div> <div id="tdmStatus" class="hid ...

jquerycsshtmlcss-position

Click to delete the <p> element

For the past few days, I've been struggling with this issue and have tried various approaches to solve it. However, I can't seem to remove the element for some reason. Can anyone offer some insight? My objective is to add the inputted markup on ...

javascriptjqueryhtml

Create JavaScript variable from either HTML or database sources

Hello, I am trying to implement a counter that retrieves its value from a JavaScript file, but I would like to customize it. Below is the JavaScript code: function updateCounter(count) { var divisor = 100; var speed = Math.ceil(count / divisor); ...

c#javascriptasp.nethtml

Disabling the scrollbar within responsive media queries

After adding a vertical scrollbar to a text box in my main CSS due to long text, everything seemed to be working perfectly... overflow: -moz-scrollbars-vertical; overflow-y: scroll; ...until I encountered my media queries. Scrolling on a smartphone can ...

htmlcssscrollbarmedia-queries

Modifying the display property of an element using JavaScript

Hello, I'm encountering an issue with a section of my javascript code. I am attempting to make the #showAddress element display as block when the deliverservice radio button is clicked or checked. I have tried searching for solutions on Stack Overflow ...

javascripthtmlcss

Adjusting the appearance of dropdown option borders in HTML/CSS - customize or eliminate borders as

select { width: 300px; font-family: inherit; font-size: 18px; padding-top: 10px; padding-bottom: 10px; padding-right: 30px; display:block; color: #999; border: none; border-bottom: 1px solid #757575; } *:focus { outline: #757575; } ...

htmlcss