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

The Three JS on the website is error-free, yet it fails to function properly

I've been attempting to replicate the example three.js page on my own website, complete with a canvas for the 3D animation. However, I'm encountering an issue where nothing is displayed, despite no errors appearing. I've tried troubleshootin ...

javascripthtmlthree.jshtml5-canvasrendering

Is a CSS-only autoexpanding label possible within a list?

I am interested in having all the labels automatically expand to the size of the widest one. Below is the HTML structure: <div class="body"> <ul class="list"> <li> <span> <label>condition</label> ...

htmlcss

The Javascript function will only initiate upon a manual reload of the page

My function is working perfectly, but only after I reload the page once it has been loaded. This function is a timer that starts counting down from 10 to 0 as soon as the page loads (which is the intended behavior). However, when I first land on the page ...

javascripthtmlflow-router

Creating a responsive layout in HTML/CSS where the div element expands to fill the entire vertical space of its parent

Looking for assistance in creating a webpage layout like the one shown in this fiddle... http://jsfiddle.net/jeljeljel/5BSva/ I need the vertical line on the left side navigation tab to extend all the way down to the footer at the bottom of the page. Th ...

htmlcss

Creating a fully responsive HTML page with a fullscreen image background

Seeking help from someone who can assist me. I have a challenge in creating a webpage with a background image that fills its <div>. Here is the code I used: <style type="text/css> .myclassdiv { background-image:url('IMAGEURL') ...

htmlcssresponsive-design

Prevent FullCalender date cells from resizing when additional events are added

I am currently utilizing JQuery's FullCalendar plugin for my project and I have observed that the date cells expand when multiple events coincide on a single date. For example, as shown in this image, the date cell for February 4 is expanding. Is the ...

javascriptjqueryhtmlcssfullcalendar

Symfony 4 Forms: Enhancing User Experience with Prototypes

Recently, I've delved into Symfony 4 and encountered an issue with rendering a form featuring a ChoiceType Field with numeric choices. The goal is to allow the user to select a specific number of tags. Here's a snippet from my controller: class ...

phphtmlsymfonytwigsymfony4

Why isn't my easypie number displaying on the inside?

I am currently utilizing the easypie plugin, but I am facing an issue where the number is not displaying inside the pie chart. Despite trying multiple solutions, I haven't been able to resolve this. How can I successfully display the number inside the ...

jqueryhtmlcsseasypie

An ordered list placed within a div container in an HTML document

When I tried to format the ordered list with sub-items, I encountered an issue. There is a nested <ol> inside a <div>, but the numbering seems to be incorrect. Can you help me understand why? OL { counter-reset: item; padding-left: 10px; ...

htmlcsshtml-lists

Arranging divs using inline-block display. How to adjust the heights consecutively?

After much searching and attempting, I am still unable to achieve a simple task. My goal is to apply display inline-block to some divs while aligning them in a row, similar to the image below: The issue arises when number 4 and 5 are positioned after 1 wi ...

javascripthtmlcssheight

What are the best methods for customizing the backgrounds of the form-floating input labels in the latest version of Bootstrap?

I'm currently using Bootstrap 5.3 and experimenting with the new "floating labels" feature. I want to add some extra styling to my input fields, like background colors. However, when I initially set a subtle green background color, it looks fine witho ...

csstwitter-bootstrapbootstrap-5

Retrieve CSS content from a file hosted on the local server

Is it feasible to use a locally hosted CSS file for styling a website managed by a server-based CMS? I am interested in utilizing SASS for local CSS development while retrieving the HTML content from a centrally hosted CMS server. ...

htmlcss

Discover elements within an array that have been modified

When working with AngularJS, I am faced with the challenge of only sending back the items that have changed from an array loaded via an AJAX request. It seems difficult to extract just the modified items without sending the entire array again. Initially, I ...

angularjs

Utilize TypoScript to inject HeaderData prior to implementing Style Definitions

My goal is to include my Google Tag Manager script before the style definitions in order to optimize the loading order and prioritize font-family rendering. Currently, I achieve this by: page.includeCSS { file1 = fileadmin/templates/css/bootstrap.css page. ...

cssgoogle-tag-managertyposcripttypo3-11.x

Ways to determine when the AngularJS digest cycle is complete without relying on $timeout

I have a query regarding AngularJS. One of the challenges in AngularJS is that it does not provide an event to notify when the digest cycle has finished. To work around this, AngularJS recommends using $timeout to queue your tasks to be executed after the ...

angularjstimeoutlifecycleangularjs-digest

Can Jquery be used to swap out specific li content?

<div class="widget_ex_attachments"> <ul> <li> <i class="fa fa-file-word-o"></i> <a href="uploads/2014/09/Parellel-universe.docx">Parellel universe</a> </li> ...

javascriptjqueryhtml

Use jQuery to swap out two div classes within a table cell (TD) if they are

Although I'm making progress, I must confess that jQuery and CSS are not my strong suits. The objective: To create a dynamic div within a table data cell for a calendar feature. The content of the div varies based on the date range input. A filled d ...

javascriptjqueryhtmlcss

Are you ready to dive into the world of running an ASP.NET MVC project with Angular in Visual Studio

Currently, I am working on developing a CRUD application using ASP.NET MVC in Visual Studio with Angular. I am interested in running the entire project solely through VS Code without relying on Visual Studio. Does anyone have a solution for achieving thi ...

c#angularjsangularasp.net-mvcasp.net-core

Attempting to evenly distribute items within a div container

My goal is to arrange the items in the container div evenly on a single line. I want them to be spaced out like this: I'm struggling to achieve this layout where the items are on the same line and evenly distributed within the available space. This ...

htmlcssvue.jsflexbox

"Composing perfect sentences: The art of incorporating quotes

I am attempting to include text with quotes in a DIV, like so: "All is well that ends well" The text is generated dynamically and I'm using a JavaScript font replacement plugin (CUFON) to add quotes around the text. Sometimes, the ending quote drops ...

javascriptjquerycssquotesword-wrap