What is the best way to conceal text while retaining icons on a compact screen?

How can I hide the text links for Home, Reservations, My Reservations, About, and Settings on smaller screens while still keeping the icons visible? Currently, I am using the following resources:

http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js

<nav class="navbar navbar-default">
   <div class="container-fluid">
      <div id='test' ng-click="doTheBack()"><a class="navbar-brand"><i class="fa fa-arrow-left"></i>Back</a></div>
         <div class="nav navbar-nav navbar-left">


        </div>
      <div>
  <ul class="nav navbar-nav navbar-right">
    <a class="navbar-brand visible-lg" href="/landingIndex.html"><i class="fa fa-home"></i>Home</a>
    <a class="navbar-brand" href="#"><i class="fa fa-calendar-o"></i> Reservation</a>
    <a class="navbar-brand" href="#myReservation"><i class="fa fa-list"></i> MyReservations</a>
    <a class="navbar-brand" href="#about"><i class="fa fa-shield"></i> About</a>
    <a class="navbar-brand" href="#settings"><i class="fa fa-gear"></i> Settings</a>

  </ul>
</div>

htmlcssangularjsangular-ui-bootstrap

Answer №1

Start by setting the a element's font-size property to 0, then gradually increase the font size of the icons to achieve a desired effect.

Here is the code snippet:

@media (max-width:550px) {
  a {
      font-size: 0px !important;
  }

   a i {
      font-size: 20px !important;
   }
}

For an example of this technique in action, try resizing the screen to below 550px width.

Answer №2

It is necessary to enclose these words in a span and assign them a class, as shown below:

<a class="navbar-brand visible-lg" href="/landingIndex.html"><i class="fa fa-home"></i><span class="link-title">Home</span></a>
<a class="navbar-brand" href="#"><i class="fa fa-calendar-o"></i> <span class="link-title">Reservation</span></a>
<a class="navbar-brand" href="#myReservation"><i class="fa fa-list"></i><span class="link-title">My Reservations</span></a>
<a class="navbar-brand" href="#about"><i class="fa fa-shield"></i> <span class="link-title">About</span></a>
<a class="navbar-brand" href="#settings"><i class="fa fa-gear"></i> <span class="link-title">Settings</span></a>

Subsequently, through CSS media queries, conceal elements with the specific class ("link-title" in this instance):

@media all and (max-width: 600px) {
    .link-title {
        display: none;
    }
}

Answer №3

One way to easily achieve this is by utilizing the hidden-sm and hidden-xs classes provided by Bootstrap.

<ul class="nav navbar-nav navbar-right">
<a class="navbar-brand visible-lg" href="/landingIndex.html">
 <i class="fa fa-home"></i>
  <span class="hidden-sm hidden-xs">Home</span>
</a>
<a class="navbar-brand" href="#">
  <i class="fa fa-calendar-o"></i> 
  <span class="hidden-sm hidden-xs">Reservation</span>
</a>
<a class="navbar-brand" href="#myReservation">
   <i class="fa fa-list"></i> 
   <span class="hidden-sm hidden-xs">MyReservations</span>
</a>
<a class="navbar-brand" href="#about">
   <i class="fa fa-shield"></i> 
   <span class="hidden-sm hidden-xs">About</span>
</a>
<a class="navbar-brand" href="#settings">
   <i class="fa fa-gear"></i> 
   <span class="hidden-sm hidden-xs">Settings</span>
</a>
</ul>

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

Is there a way to dynamically adjust @keyframes properties through JavaScript?

I am looking to dynamically change the top value of the keyframes based on a JavaScript variable x. While I have experience changing CSS with JavaScript, this particular challenge has me stumped. Code: var x = Math.floor((Math.random() * 1080) + 1); ...

javascripthtmlcss

Determining the optimal time to declare a controller within a directive

I am a beginner with Angular and I'm not sure when to declare a controller inside directives. Take a look at this code snippet: <body ng-app="App"> <div ng-controller="AppCtrl"> <div data-items></div> </div ...

angularjs

Creating a cascading layout with React Material-UI GridList

Can the React Material-UI library's GridList component be used in a layout similar to Pinterest's cascading style? I have utilized Material-UI Card components as children for the GridList: const cards = props.items.map((item) => <Card ...

javascriptcssreactjsmaterial-ui

Tips for ensuring consistent dimensions on a bootstrap card

Currently, I am working on a project to gain a better understanding of API calls within Angular. While the functionality is running smoothly, my struggle lies in designing the HTML layout. To enhance the aesthetics, I have incorporated Bootstrap 5 into the ...

htmlcssbootstrap-5

Embedding a CSS file into a PHP class

I've encountered a little issue that I can't seem to solve on my own. I've put together a "webengine" using multiple classes. The primary class responsible for obtaining a theme's internals is called "Logic". This Logic class contain ...

phphtmlcss

Angular not firing slide.bs.carousel or slid.bs.carousel event for Bootstrap carousel

I've searched high and low with no success. I'm attempting to detect when the carousel transitions to a new slide, whether it's automatically or by user click. Despite my numerous attempts, I have been unable to make this event trigger. I ha ...

javascripthtmlangulartypescript

Troubleshooting a Next.js background image problem when hosting on Netlify

I've encountered an issue while attempting to deploy a nextjs website on Netlify. Everything works perfectly on my local server, but once it's on Netlify, the background image URL changes and the image becomes invisible. Original CSS code: backg ...

cssreactjsnext.jsbackground-imagenetlify

Utilize JavaScript to enclose every piece of text within single quotes in a span element

I have a tiny snippet of text: "some sample text" just a little more "additional text" I am trying to figure out how to wrap all the content between quotation marks in a span container, similar to what hilight.js does. I've been struggling to make it ...

javascripthtml

Switch button - reveal/conceal details

I am looking for assistance in toggling the visibility of information when clicking on an arrow icon. I have attempted to use JavaScript, but it was unsuccessful. My goal is to hide the information below by clicking on the downward-facing arrow image , an ...

javascripthtmlcssangulartypescript

Angular JS Ternary Operator - Simplifying Conditional Statements

So I have $scope.lineData[0].line in my controller. My goal is to verify if $scope.lineData[0] != undefined, and if it is, then use $scope.lineData[0].line. If not, simply add the value "0". How can I achieve this with AngularJS? Could someone assist me w ...

jqueryangularjsternary

Creating uniform table column widths within a flex container with dynamic sizing

I am working on designing a navigation system for my website using a table inside a flexbox. I want to ensure that the table columns have equal width and can scale dynamically. Additionally, I aim to wrap the text in the data cells without changing the cel ...

htmlcss

Angular Material Dialog: Establishing focus on the initial element

Currently, I am working with Angular 1.5.x and Material Design. I have created a custom Dialog box where I want the first input field to be selected when the dialog is displayed. Do you know how I can achieve this? To better illustrate my issue, I have s ...

angularjsdialogfocusangular-material

Ways to extract metadata from a given URL

Recently, I've delved into the world of JavaScript and I'm looking to extract metadata from a given URL. Whenever a URL is entered into an input field, I want to retrieve its meta data - a simple task in HTML using JavaScript. However, every time ...

javascripthtml

What is the best way to modify the selection text background with CSS?

Does anyone know the method for modifying the selection text background in CSS? Many modern websites opt for a personalized background color instead of the traditional blue? ...

htmlcss

What is the best way to change CSS style for a button when clicked using JavaScript?

Is there a way to switch the background style of a CSS div when clicking the same button? function changeBg() { var divElem = document.getElementById("change-bg"); if (divElem.style.backgroundColor === "yellow") { divElem.style.backgroundColor ...

javascripthtmlcss

Customizing the styling of a TextField component in ReactJS using material-ui

I am currently working with Reactjs and material-ui. I am looking to apply some custom styles to a TextField using css. Specifically, I would like to change the color of the TextField underline and label when the input is clicked. Although I know it can b ...

javascriptcssreactjsmaterial-ui

Having trouble parsing JSON data from $_POST while utilizing AngularJS

While working in Angular, I encountered the following scenario: var data = {}; data['name'] = "test"; data['class'] = "testClass"; $http.post('http://testURL',data,function(data){ console.log(data); }); Upon inspecting the ...

phpjqueryajaxjsonangularjs

Elements resize based on their parent's and siblings' widths

I have organized the parent div and its three children divs. Presently, the third child is concealed. I've designated the width of the first child as 20% and desire for the second child to automatically take up the remaining width without explicit set ...

htmlcss

Guide to selecting an element with a combination of text and a random number using Selenium with JavaScript

<a id="Message4217" class="btn-sm btn-danger Message" data-id="4217"><span class="icon-adjustment icon-trash"></span> Delete</a> The objective is to remove a message base ...

javascripthtmlseleniumselenium-webdriver

Has the submit button become inactive once it has been inserted into a collapse?

I have recently implemented a collapse feature and inserted a form into it, but unfortunately, the submit buttons are not functioning properly. They are failing to send the data to the PHP file. <div class="container"> <div class= ...

jqueryhtmltwitter-bootstrap