Menu elements should display a responsive behavior where on mobile devices, only the icon is shown instead of the word "menu"

Due to the length of our company logo, we need a way to hide certain letters in the Menu and Basket sections, while still displaying the icons. Wrapping the names in span tags and using visibility:hidden; works but leaves empty space visible on the right side of the element (basket). Is there a better CSS solution for this issue?

header {
    display:flex;
    flex-flow: row wrap;
    background:forestgreen;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    height:3rem;
}

.logo {text-align:center;}
.logo span {
  display:block;
}

.menu, .basket {
    background-image: url('http://placehold.it/16x16');
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 20px;
}
    <header>
        <div class="menu">menu</div>
        <a href="/" class="logo">Company<span>subtitle</span></a>
        <div class="basket">basket</div>
    </header>

Desired outcome:

For Mobile View

https://i.sstatic.net/ANWyd.png

For Desktop View https://i.sstatic.net/29uNA.png

Thank you in advance for any help from the stackoverflow community.

htmlcss

Answer №1

According to @CBroe's observation, when using the display:none; property, it is important to include a height specification in order to keep the icons visible.

header {
    display:flex;
    flex-flow: row wrap;
    background:forestgreen;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    height:3rem;
}

.logo {text-align:center;}
.logo span {
  display:block;
}

.menu, .basket {
    background-image: url('http://placehold.it/16x16');
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 20px;
  height: 1rem;
}
.menu > span, .basket > span {
    display:none;
}

@media only screen and (min-width: 35em) {
.menu > span, .basket > span {
    display:block;
}
}
<header>
        <div class="menu"><span>menu<span></div>
        <a href="/" class="logo">Company<span>subtitle</span></a>
        <div class="basket"><span>basket</span></div>
    </header>

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

Guide on accessing a method from a div element in VueJS

Is there a way to only render a div based on a specific condition and call a method when the condition is true? Here's an example of what I'm trying to achieve: <div v-if="timetable === null" @click="mymethodhere"> ...

javascripthtmlvue.js

Can search engines understand and interpret CSS files?

Upon examining various CSS files across different websites, I've noticed comments similar to the one below: /* Theme Name: CSSnewbie V2 Theme URI: http://www.cssnewbie.com Description: Second version of CSSnewbie, based on Carrington theme by Crowd ...

cssseo

How can EJS variables be utilized within HTML input fields?

I am facing an issue while trying to use a checkbox to redirect selected users to a new page. I am looking for a solution on how this can be achieved, especially when using mongodb to store the information. Below is my current code snippet: Firstly, I ren ...

htmlnode.jsexpress

Is there a way to retrieve JSON data from a different domain and incorporate it into my own website?

I am attempting to utilize JSON data from "" and display the data on my website. My goal is to extract the JSON field name "Stats" and retrieve the sub-field name '\"v\"'. You can refer to the documentation provided by purpleair here: h ...

javascriptphphtmljson

Ways to change the CSS styling of the placeholder attribute within a textarea or input field tag

I am currently working on adjusting the font size of the text within the placeholder attribute of a textarea element. While I have been successful in achieving this using vanilla CSS, I have encountered difficulties when trying to implement the same concep ...

cssangularangular-material2

Adjust the text color based on the background image or color

Here on this site, I have designed the first div to display a dark image, while the second one shows a light background. I am aiming to adjust the sidebar text color based on whether it is displayed against the dark or light background. How can I achieve ...

javascriptjqueryhtmlcss

Is there a way to utilize JavaScript in order to trigger a CSS animation to occur at a designated time during a video

I have a cool animated image element that I want to play at a specific point in time during a video using JavaScript. I'm not sure how to make it happen, but I know the .currentTime property could be the key. My goal is for the animation to only play ...

javascriptcss

How can progress bars be animated using CSS or JavaScript?

I am currently working on creating a progress bar animation, but I'm unsure whether to use CSS or JS. Can anyone provide insight on how this effect was achieved here? I am hoping to replicate it. Does anyone know if this is the code they used? I&apos ...

javascriptjqueryhtmlcssanimation

Allow the words to seamlessly transition back and forth between columns in a continuous cycle

Currently, I am attempting to showcase a large text in a format similar to a book. Each "page" has designated width and height, with content displayed over two columns: left and right. In this layout, page 1 is on the left, page 2 on the right, page 3 on t ...

javascriptjqueryhtmlcsswordpress

Can I use the mouseover event on an image to display a sibling div?

Hi everyone! I'm fairly new to web development and I could really use some advice. I'm trying to implement a mouseenter event on an img tag to show a sibling div, but I'm encountering some strange behavior. The mouseenter event seems to be w ...

javascripthtmlcss

Unable to display Bootstrap 5 modal

I am currently in the process of constructing a basic webpage that includes a navigation bar and a table. The table rows are being dynamically generated through a simple JavaScript script that fetches data asynchronously from a database. I opted to utilize ...

javascripthtmlbootstrap-modalbootstrap-5

Positioning a sticky footer in a dual-column design

This updated post is a revised version of the one found at this link. I aim to provide a clearer explanation of my issue compared to the previous post. The problem revolves around the placement of the footer in two different scenarios. Scenario 1: The fi ...

htmlcss

What is the best way to responsively center an after pseudo-element above its parent?

Looking to create a dynamic tooltip without any fixed widths or constraints on the parent element. The process seems simple enough, but I'm facing an issue with centering the after element due to an existing transform attribute of transform: translat ...

cssvue.jssasspseudo-element

Tips for positioning HTML elements at the exact mouse location as it moves, without any delay?

Currently, I am in the process of developing a web-based drawing application that does not rely on using a canvas. My decision to avoid using a canvas is because I plan to incorporate CSS Keyframes into the HTML elements upon placement. This approach allow ...

javascriptjqueryhtmldrawing

Incorporate clickable selection buttons into an HTML layout without disrupting the placement of existing

I have set up an HTML document that features a collection of buttons enclosed within a DIV id labeled 'buttons'. My objective is to introduce a sort by button into the mix without disrupting the current layout. I attempted to achieve this goal by ...

htmlcssbuttonselect

Establishing connection to the database

I am in the process of developing a small-scale project on creating Universal Identification Numbers, similar to that of college level projects. My goal is to design a page with tabs for different databases, so that when I press the key 'A' for a ...

phpmysqlhtml

Forwarding to a specific webpage

`<!DOCTYPE html> <html class="no-js"> ... </body> </html> I'm in the process of developing a website where users can enroll in programs by clicking on an ...

csshttp-redirectwebhtml

using percentage and float to enforce overflow-x

I have a small structure of list items inside a container and I am trying to display horizontal overflow instead of vertical overflow. However, I am having trouble achieving this, possibly due to the properties like float and percentage that I am using. I ...

htmlcsscss-floatoverflowpercentage

Tips for adjusting the hue of a single color in a JPEG image

Is there a way to transform white color to red using only CSS, while leaving the rest of the colors unaffected? This should be accomplished without changing any other elements. ...

htmlcss

Role="presentation" containing a <form> element within

<nav> <ul class="nav nav-pills pull-right"> <li role="presentation"> <form action="/logout" method="POST" id="logout-form"> <a href="#" onClick="document.getElementById('logout-form&ap ...

javascripthtmlbootstrap-4