Change the navbar brand in Bootstrap to be hidden on small screens like mobile devices

I am facing an issue with the navbar on my website where it expands in height when viewed on mobile devices due to not fitting into a single line. I have observed that if I remove the brand, it fits perfectly. However, I want to keep the brand visible on larger screens. How can I make the brand disappear only on small screens (mobile) and remain visible on computer screens?

Thank you!

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Brand/logo -->
  <a class="navbar-brand custom-brand" href="#">Logo</a>
  
  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>

I attempted to use CSS to hide part of my brand logo, but this solution only cuts off half of the logo making it look unappealing.

.custom-brand{
    overflow: hidden;
}
javascripthtmlcssbootstrap-4

Answer №1

Refer to Bootstrap 4.0 documentation for more information: Concealing elements

To conceal elements, simply utilize the .d-none class or one of the responsive screen variation classes such as .d-{sm,md,lg,xl}-none.

If you want to display an element only on certain screen sizes, you can merge a .d-*-none class with a .d-*-* class. For instance, using .d-none .d-md-block .d-xl-none will hide the element on all screen sizes except for medium and large devices.

Answer №2

To customize the appearance for larger screens, you can create a class called "desktop" and use a media query to define its properties. This way, the content will only be visible on screens that are wider than 500px.

<style>
@media screen and (max-width: 500px){
.desktop{
display: none!important;
}
}
</style>

<a class="navbar-brand custom-brand desktop" href="#">Logo</a>

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

Implement AJAX and PHP to submit form data along with the page ID and session information

I am currently developing a school book library website project that allows students to browse and select books, as well as send requests to the librarian to borrow them. However, I am still learning jQuery and facing some challenges in handling issues. H ...

javascriptphpjqueryajax

Encounter a Config validation error while trying to utilize Nest.js ConfigService within e2e tests

I'm encountering an error despite having the NODE_ENV=development variable in my .env file. The error message reads: ● Test suite failed to run Config validation error: "NODE_ENV" must be one of [development, production] 11 | imports ...

javascriptnode.jstypescriptexpressnestjs

Mobile devices are unable to properly implement the Jquery show/hide feature

Currently, I am working on a small Russian project and facing some challenges with the mobile version of my website: php8098.github.io/breakfast. The issue lies within the first slider where the play button should trigger a modal window to open. I urgentl ...

javascriptjquerycss

JavaScript/DOM - What sets apart a "CSS Selector" from an attribute?

When it comes to excluding declarative event handlers: <a href='#' onclick=<handler> ... /> Is there a significant difference between an Attribute and a CSS Selector? For example, if I define my own attribute: <a href='#&a ...

javascriptcssdom

What are the applications of global variables in node.js?

global.test = "test"; console.log(global.test); //test but I want to accomplish this: console.log(test); //test without using: var test = global.test; Is there a way to achieve this? I am looking for a solution where any module in my project does not ...

javascriptnode.js

Angular has trouble displaying information across multiple HTML files

I have created an HTML file to display some data. The initial HTML file named disc-log.html looks like this: <div> <h2>Discs</h2> <jhi-alert></jhi-alert> <div class="container-fluid"> <div class=" ...

javascripthtmlangularjsjhipster

How to interact with AngularJS drop-down menus using Selenium in Python?

I have been working on scraping a website to create an account. Here is the specific URL: Upon visiting the site, you need to click on "Dont have an account yet?" and then click "Agree" on the following page. Subsequently, there are security questions th ...

javascriptpythonangularjsselenium-webdriverdrop-down-menu

The npm postinstall script is functional, however, it does not complete successfully and ends

I have encountered an issue while trying to solve a problem with my project. In my package.json file, I have included a postinstall script that connects to a database and calls a function to write data into it. The script seems to be working fine as the da ...

javascriptnode.jsnpm

Anomalous Link Behavior on iOS

I am encountering a strange issue with links on the provided website in iOS: When I try to tap on the links under the "Galleries" menu, such as "Benny," nothing happens. It appears that Safari is trying to load the new page, but then it fails to do so. H ...

javascripthtmlioscss

The filter on the mobile version is not displaying correctly

When I select a category in the input filter, only items with the same category are displayed when clicked. However, when I click on "Others" on the desktop version, only rows with that category are shown, but on mobile after resizing and filtering, nothin ...

javascripthtmljquerycss

How come the inclusion of a DOCTYPE tag impacts the styling of my CSS?

I am puzzled why the code below renders correctly without any issues until I add a doctype declaration: <body style="margin:0; padding:0; background-color:#eeeeee"></body> <div id="HeaderContainer" style="background-color:#eeeeee; color:Bl ...

htmlcss

Having trouble with the click button flip function? It seems to be working in one section but not in

Currently, I am facing an issue with a card section that contains two buttons and a description. The first button adds an image which is working perfectly fine, as well as the description section. On the other hand, the second button adds a video and when ...

javascripthtmlcss

The issue arises when using Jquery version 3.4.1, where the ".on()" method for the "click" event does not trigger when the

Currently, I am learning Cordova through a tutorial that involves Jquery 3.4.1 and Bootstrap 4.4.1. The tutorial is a bit outdated, so before reaching out to the author, I figured I would seek help on this platform (link to tutorial: ) While I assume the ...

jquerycordovabootstrap-4

Having issues with closing a div tag using $.after() function

This issue can be better understood with an example: http://jsbin.com/lavonexuse The challenge here is to insert a full-width row after a specific column (identified by the class .insertion-point) when "Insert Row" is clicked. The problem I'm facing ...

javascriptjquerytwitter-bootstrap

Extracting the chosen content from a textarea using AngularJS

Greetings! I am currently experimenting with an example that involves displaying values in a text area. You can find the code on Plunker by following this link: Plunker Link <!DOCTYPE html> <html> <head> <script src="https://aj ...

javascriptangularjs

Multiple button clicks causing events to fire repeatedly

My PHP file echoes a button, but when I click it, the action fires multiple times. Why is it behaving like this? I have tried solutions from Stack Overflow, but none of them seem to work. Any suggestions or corrections? $(document).on('click',& ...

javascriptjquery

One way to transfer data from a Vue table component to another Vue table component is by including an edit button on each row in the table. This allows

When working with two table components, one fetching records using axios and the other needing to get records after clicking on the edit button in the parent component, I encountered issues. Despite attempting Vue's parent-to-child component communica ...

javascriptlaravelvue.js

What steps should be taken to address the Chrome alert stating that the deferred DOM Node cannot be identified as a valid node?

While working on my node.js project hosted on a localhost server, I've encountered an unusual warning message in the inspector. The warning states: The deferred DOM Node could not be resolved to a valid node. Typically, I use the inspector to examine ...

javascriptnode.jsexpressgoogle-chrome-devtoolsweb-inspector

Ways to vertically align a div in Bootstrap 4?

As I delve into working with bootstrap 4, I am experimenting with creating various basic layouts. In line with the guidelines provided in bootstrap 4 documentation, I aimed to vertically align block elements by applying the class align-items-center. Despi ...

cssbootstrap-4

Is there a method in CSS animations that allows for endlessly repeating successive animations in a specified sequence?

While working with CSS animations, I encountered a challenge of making two animations occur successively and repeat infinitely without merging keyframes. Is there a way to achieve this using only CSS? If not, how can I accomplish it using JavaScript? I a ...

javascripthtmlcsscss-animations