The navigation bar text overflows when the sidebar is collapsed into icons

My sidebar contains icons and a menu name. When the screen size is smaller than a certain amount, the sidebar collapses to show only the icon and hides the menu name. Here is the structure of the navbar:

<nav id="sidebar" [ngClass]="{active: barActive}">
        <div id="toogleIcon" (click)="onDismiss()">
            <img id="closeIcon" *ngIf="barActive" class="" src="../assets/img/icons/1.svg">
            <span id="menuIcon">
                <img *ngIf="!barActive" class="" src="../assets/img/icons/2.svg">
            </span>
        </div>

        <ul class="list-unstyled components">
            <li routerLinkActive="active">
                <a class="itemMenu" routerLink="/clients">
                    <img class="navItemsSvg" src="../assets/img/icons/A.svg">
                    <span *ngIf="barActive && !islargeDesktop() || islargeDesktop()" class="navTextItem">A</span>
                </a>
            </li>
            <li routerLinkActive="active">
                <a class="itemMenu" routerLink="/users">
                    <img class="navItemsSvg" src="../assets/img/icons/B.svg">
                    <span *ngIf="barActive && !islargeDesktop() || islargeDesktop()" class="navTextItem">B</span>
                </a>
            </li>
            <li routerLinkActive="active">
                <a class="itemMenu" routerLink="/houses">
                    <img class="navItemsSvg" src="../assets/img/icons/C.svg">
                    <span *ngIf="barActive && !islargeDesktop() || islargeDesktop()" class="navTextItem">C</span>
                </a>
            </li>
            <li routerLinkActive="active">
                <a class="itemMenu" routerLink="/devices">
                    <img class="navItemsSvg" src="../assets/img/icons/D.svg">
                    <span *ngIf="barActive && !islargeDesktop() || islargeDesktop()" class="navTextItem">D</span>
                </a>
            </li>
            <li routerLinkActive="active">
                <a class="itemMenu" routerLink="/administration">
                    <img class="navItemsSvg" src="../assets/img/icons/F.svg">
                    <span *ngIf="barActive && !islargeDesktop() || islargeDesktop()" class="navTextItem">F</span>
                </a>
            </li>
        </ul>
    </nav>
    <div id="barPlaceholder"></div>

You can view it here:

http://jsfiddle.net/36mjqc5v/

The issue I am encountering is that when the sidebar collapses, the menu name continues to display and spills out of the sidebar. This seems to be a problem with the CSS properties, but I am unsure of what is causing it.

htmlcssangularbootstrap-4

Answer №1

You can achieve this by incorporating a media query in your CSS code

 @media(max-width:600px) /*specific width*/
    { .navTextItem{display:none;}}

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

Adjusting the Direction of Flex Components

As someone who is new to css and html design, I recently started using flex in my bootstrap designs. My goal was to have the components sorted from left to right direction, similar to how it's done on this site. Now, I am looking to shrink the slider ...

htmlcssflexboxcarousel

The stature of Bootstrap's columns

Exploring Bootstrap has been an exciting journey for me, as I believe it will simplify the process of creating visually appealing web pages. I'm currently facing a challenge in understanding these two examples: Bootstrap 3: http://codepen.io/rhutchi ...

csstwitter-bootstraptwitter-bootstrap-3

Convert normal text to clickable links in chat messages within an angular application automatically

I'm working on incorporating a chat feature into an Angular application. One of my goals is to automatically detect URLs in the text that users enter and display them as clickable links when sent. So far, I have attempted to achieve this by using: & ...

angular

Is it possible to divide an Observable<boolean[]> into an array of Observable<boolean>?

Within a component, I have the following code snippet: // this.can... are boolean values redux .watch(state => state.userInfo.access.current) .takeUntil(this.done) .subscribe(access => [this.canPartners, this.canServices, this.canTens, thi ...

angularrxjs

The 'ngForOf' directive cannot be bound to 'div' element as it is not recognized as a valid property

Encountering an issue with adding an ngFor directive on a div, which is causing a warning and preventing my HTML from rendering properly. I experimented with using *ngFor on various elements like <li>, <tr>, and <span>, but kept getting ...

angulartypescriptprimeng

Is there a way to dynamically change the validation rules for a form field using formBuilder as the user interacts with

Utilizing the formBuilder, I have implemented validations for my forms. However, I now desire to adjust the rules for a specific field (cellphone). Currently, my code is structured like this: this.register = this.formBuilder.group({ cellphone: [ nul ...

angular

Utilizing Angular 7, Ngrx, and Rxjs 6 to efficiently share state data among lazily loaded modules

Currently, I am working with Angular 7 alongside Ngrx and Rxjs 6. In my project, I have two lazy loaded modules named A and B, each with its own selectors and reducers. The challenge I am facing is accessing the data stored in module B's state from m ...

angulartypescriptrxjsngrxngrx-store

What is the best way to implement a collapsible feature similar to Bootstrap within AMP?

Looking to implement a collapsible feature in AMP with a smooth animation similar to Bootstrap. While I can create a collapsible by toggling classes and adjusting height with CSS, the challenge lies in accommodating varying content heights without setting ...

twitter-bootstrapbootstrap-4twitter-bootstrap-3amp-html

Craft a circular design with an Arc and a Pie using the DIV DOM element

After creating an ellipse using the div DOM element, here's how I did it: var body = document.querySelector('body'); var div = document.createElement('div'); div.style.borderRadius = '50%'; div.style.border = '1px s ...

javascripthtmlcss

Verify using ngIf whether an Angular component is an array or not

Is it possible to target a specific component of an array rather than just checking for a variable in Angular? <div class="someComponent" *ngIf="someVariable"> For instance, how can I use the array component someArray[] with the ...

arraysangularangular-ng-if

Adjust the parent element to match the width of the child by utilizing the "display: grid" property

edit: I'm uncertain if this is a duplicate issue. My concern is not about the background color extending beyond the container width, but rather about expanding the container to match the size of its child with display: grid. I have updated the example ...

htmlcsscss-grid

Show an image when hovering over a dot using CSS - without hovering directly on the image

I'm currently working on a merchandising page that involves photoshopping several products onto a background image. I want customers to be able to hover over a dot positioned on each product to reveal its information and provide a link similar to . Ho ...

htmlcss

The footer is not displaying the background image properly

Currently in the process of creating my website. I've successfully added my banner and footer, but unfortunately, I'm facing an issue with the background. It seems to not be stretching out properly, leaving some empty white space. Click here to ...

htmlcss

Ionic JavaScript function runs independently of promise resolution

Within my ngOnInit on a page, I have a method that is meant to fetch data. However, it seems like the other methods in the chain are executing before the fetch data process is complete. Here's a snippet of the code: ngOnInit() { this.devicesinfo.fetc ...

javascriptangularionic-framework

In order for Angular jQuery click events to properly function, they must be triggered by a

My admin panel is built using jQuery and Bootstrap, and it functions properly when used outside of the Angular framework. However, after integrating jQuery and Bootstrap into an Angular project and configuring them, I noticed that I had to double click on ...

jqueryangulartypescriptevent-handlingdom-events

How can I assign a value other than a string to a placeholder or vue property?

As I develop a content management system using Nuxt and Pug/Jade, I am looking for an efficient way to create a list of input fields for users to enter information. My idea is to use the v-for directive to render the list and dynamically set the value and ...

htmlvue.jsinputpugnuxt.js

How can I incorporate Bootstrap multi-select into the jQuery DataTables DOM?

Having trouble implementing a bootstrap multi-select inside a jQuery datatable DOM. I followed this example to add a custom element within the jQuery datatable container. It works fine for normal bootstrap select, but when trying to add a bootstrap multi-s ...

javascriptjquerybootstrap-4datatables

The CSS does not display properly on iPad or mobile devices

Recently, I had the opportunity to design a website for a local music school. This project was a great learning experience that has shown me the importance of continuous improvement and practice. Check out the site here Initially, I wanted to make the w ...

cssipad

Removing a data entry from a PHP-generated MySQL table

In the process of developing a system, I have encountered a need to display database records in an HTML table. The functionality for creating the HTML table and retrieving data is working as expected. However, I am facing an issue with adding a column cont ...

phphtmlhtml-table

Ensure that the child div fills the entire parent area when resizing the page

I am facing an issue with a container div that contains two elements. When I resize the window, one inner div moves under the other. However, my requirement is that when one div moves under another on resizing, the first div should occupy the full width o ...

csshtml