What is the method to display only icons without text when the sidebar is minimized?

check out this image for reference

I need the text to be hidden and only display the icons when the sidebar menu is toggled and the sidebar container is collapsed

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="sidebar">
    <a th:href="@{/dashboard/}" class="sidebar-menu"><span class="fas fa-home"></span>Dashboard</a>
    <a th:href="@{/profile/}" class="sidebar-menu"><span class="fas fa-user"></span>Admin Profile</a>
    <a th:href="@{/notification/}" class="sidebar-menu"><span class="fas fa-bell"></span>Notifications</a>
    <a th:href="@{/account/}" class="sidebar-menu"><span class="fas fa-users"></span>User Accounts</a>
    <a th:href="@{/product/}" class="sidebar-menu"><span class="fas fa-list"></span>Product List</a>
    <a th:href="@{/order/}" class="sidebar-menu"><span class="fas fa-shopping-cart"></span>Transactions</a>
    <a th:href="@{/report/}" class="sidebar-menu"><span class="fas fa-chart-line"></span>Sales report</a>
</div>

Seeking assistance on how to achieve this

htmlcsssidebar

Answer №1

<div class="sidebar compressed">
<a th:href="@{/dashboard/}" class="sidebar-menu"><span class="fas fa-home"></span><span class="menu-text">Dashboard</span></a>
<a th:href="@{/profile/}" class="sidebar-menu"><span class="fas fa-user"></span><span class="menu-text">Admin Profile</span></a>
<a th:href="@{/notification/}" class="sidebar-menu"><span class="fas fa-bell"></span><span class="menu-text">Notifications</span></a>
<a th:href="@{/account/}" class="sidebar-menu"><span class="fas fa-users"></span><span class="menu-text">User Accounts</span></a>
<a th:href="@{/product/}" class="sidebar-menu"><span class="fas fa-list"></span><span class="menu-text">Product List</span></a>
<a th:href="@{/order/}" class="sidebar-menu"><span class="fas fa-shopping-cart"></span><span class="menu-text">Transactions</span></a>
<a th:href="@{/report/}" class="sidebar-menu"><span class="fas fa-chart-line"></span><span class="menu-text">Sales report</span></a>

For each menu item, wrap the text in span and add a compressed class when the sidebar is compressed. Remove the class when the sidebar is expanded. Then add the following css:

.sidebar.compressed .menu-text{display:none}

Answer №2

Using a css selector to target text nodes is not possible. (Although there is an experimental feature known as ::target-text, it may not be useful for your specific case).

The recommended approach is to enclose the text within an element (such as a span) and then apply a selector to show/hide the text.

Answer №3

Here is a potential solution to address your problem:

  • I have enclosed the text of the navbar items in a span tag for easier CSS styling.
  • The term 'compress' triggers the text to disappear upon mouse hover.
  • Necessary CSS rules have been included to enable this disappearing effect.

.sidebar {
  display: flex;
  flex-direction: column;
}

.fas {
  width: 40px;
  text-align: center;
}

#compress:hover~a>.nav-text {
  display: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="sidebar">
  <div id="compress">Compress</div>
  <a th:href="@{/dashboard/}" class="sidebar-menu"><span class="fas fa-home"></span><span class="nav-text">Dashboard</span></a>
  <a th:href="@{/profile/}" class="sidebar-menu"><span class="fas fa-user"></span><span class="nav-text">Admin Profile</span></a>
  <a th:href="@{/notification/}" class="sidebar-menu"><span class="fas fa-bell"></span><span class="nav-text">Notifications</span></a>
  <a th:href="@{/account/}" class="sidebar-menu"><span class="fas fa-users"></span><span class="nav-text">User Accounts</span></a>
  <a th:href="@{/product/}" class="sidebar-menu"><span class="fas fa-list"></span><span class="nav-text">Product List</span></a>
  <a th:href="@{/order/}" class="sidebar-menu"><span class="fas fa-shopping-cart"></span><span class="nav-text">Transactions</span></a>
  <a th:href="@{/report/}" class="sidebar-menu"><span class="fas fa-chart-line"></span><span class="nav-text">Sales report</span></a>
</div>

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

What is the best way to include both left and right borders in HTML/CSS

I'm looking to add left and right borders to a specific cell within my table. Utilizing Bootstrap 4 beta, I attempted the following code snippet: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="style ...

htmlcssbootstrap-4

The issue encountered with Bootstrap Carousel and the <img> tag displaying incorrect object-fit and object-position properties

Currently, I am working on a carousel design that looks like the code snippet below: <div id="myCarousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> ... </ol> <div class="carousel ...

htmlcssbootstrap-4carouselobject-fit

Guide on utilizing the list of names in a POST request

<td class="widht200"> <input type="text" name="agg" size="2" disabled="disabled"/> </td><td class="widht200"> <input type="text" name="agg" size="2" disabled="disabled"/></td><td class="widht200"> <input type=" ...

phpjavascripthtmlformspost

Expand the dimensions of the file upload field to make it taller and wider

I am trying to create a file upload field within a transparent div sized at 150px x 150px. The goal is for the file dialog box to pop up when any part of the div is clicked, allowing the user to select a file for upload. Despite my attempts, I haven't ...

jqueryhtmlcss

Is it possible to achieve a smooth transition to the right using CSS

I'm attempting to create a sliding box effect from left to right using only transitions, similar to this: #box { width: 150px; height: 150px; background: red; position:absolute; transition: all 2s ease-out; right:auto; } .active{ bac ...

javascripthtmlcss

Tips for inserting a Vue.js variable into a window.open event

Within this snippet of code: <tr v-for="person, index in People" :key='index'> <td> <button type="button" onclick="window.open('/details/'+person.id,'_blank')"> details</butto ...

javascripthtmlvue.jsfrontend

Using Java script to parse and interpret a JSON file

I have a JSON file that follows this structure. Being new to JavaScript, I am looking for guidance on how to extract each key and its associated value. Can someone help me understand where to begin? AuthServer.Web": { "stuff": { "evenmore st ...

javascripthtmljson

What is the best way to ensure the snackbar occupies the full width on smaller screens?

After reviewing this commit: https://github.com/callemall/material-ui/commit/11695dcfa01e802797115d42c6d3d82d7657b6ab#diff-e9014062cd8e3b4344ab619966f35ef2 In the latest update, the snackbar no longer expands to 100% width on mobile screens. Can someone p ...

cssreactjsmaterial-uisnackbar

What is the reason this text is not utilizing the css property ellipsis?

There is a problem I am facing where the user's name becomes too long, but only in mobile view. I need to apply the text-ellipsis CSS property for this issue. Here's a screenshot: https://i.sstatic.net/T6vi3.png Prior to adding the styles mentio ...

htmlcssfrontend

Position the label and the select dropdown side by side within the sweetalert 2 component

Can anyone provide an example of aligning a label and dropdown in the same row using sweetalert2? I attempted to customize the label placement, but it appears on a separate line. I would like to log the selected dropdown item upon clicking the OK button. ...

javascripthtmlcssangularsweetalert2

"Populate a div with an array of images extracted from a JSON file

I found a website that provides an array of images like the sample below. { "imageUrl":"http://server06.amobee.com/aspx/nadav/test/banner320x50.png", "expandedImageUrl":"http://server06.amobee.com/aspx/nadav/test/banner320x320.jpg" } My ob ...

javascripthtml

Guide for showing a horizontal scroll bar without compromising on data visibility

I find myself dealing with a significant amount of data in a table on a regular basis. It can be quite cumbersome to constantly scroll down the page using the scroll bar to view all the data. What I really need is a horizontal scroll bar that allows me to ...

jqueryhtmlcsstablesorter

Flex dimensions causing design elements to break in React Native

When using both import {dimension} from 'react-native' and flex:1 in a CSS style, the design may break on certain devices, especially when there is an input field present in the JavaScript. This issue is unexpected as CSS should typically be stra ...

javascriptcssreactjsreact-native

Prevent individual elements from shifting around on browser resizing within a React form

Having issues with a React form that includes an image gallery and input fields. import React, { Component } from 'react'; import ImageGallery from 'react-image-gallery'; import { Container, Row, Col, InputGroup, Button, FormControl, ...

javascripthtmlcssreactjs

Using Unique CSS Styles for Various Browsers Other Than Internet Explorer

I am currently working on a unique website design that incorporates all content on one page instead of navigating to multiple HTML pages. While the site functions well in Google Chrome and the latest version of Internet Explorer, I am experiencing some for ...

htmlcssfirefoxbrowsersafari

Enhance the appearance of an HTML select tag for optimal viewing on iOS Safari browser for

I have customized three dropdown lists using CSS. I set the style as follows: .dropdown{ font-size: 20px; background: white; border:none; position: relative; } While the dropdowns appear fine in Chrome, there seems to be a slight differen ...

htmlioscssiphonesafari

When I open Firefox, all I see is a blank page with only the h2 heading displayed

I am trying to print the text "I can print" on a page, but only the title shows up and the rest of the page is blank. What mistake might I be making? <!DOCTYPE html> <html> <head> <title>Object exercise 4</title> </head& ...

javascripthtml

I would like to add an underline below the title

.thumb-text { position: absolute; width: fit-content; left: 50%; transform: translateX(-50%); } .thumb-text h3 { font-family: Georgia; font-size: 30px; color: black; font-weight: 900; } .thumb-text h3::after { content: ''; p ...

htmlcss

PHP: implementing several forms on a single webpage

In my current situation, I need to display forms that resemble an Excel sheet with a submit button next to each row. When the submit button is clicked, the data is saved for that specific row, the row is disabled, and the focus automatically moves to the n ...

phpjqueryhtmlmysqlforms

Does the Sass default compiler have built-in autoprefixing capabilities?

Suppose I have the following sample code: :fullscreen a { display: flex; } Is it possible for the default sass compiler to transform it into this: :-webkit-full-screen a { display: -webkit-box; display: flex; } :-moz-full-screen a { display: fle ...

csssassautoprefixer