Jump to content

Layering CSS for different navigation menu adjustments on desktop and on mobile

Recommended Posts

Hi, I'm looking for a way to layer CSS to allow for custom menus on desktop and on mobile. Currently, my desktop menu is set up with this:

.header-title-logo a:after {
    content: "Client Name To Go Here";
    display: inline-block;
    font-size: 36px;
    font-family: Poppins;
    color: black;
    text-align: center;
    vertical-align:middle;
    font-weight:400;
    padding-left: 20px;
}

However, this sizing does not work for mobile. The text overruns the menu and spills onto the site. I know that there are some simple standalone fixes for the mobile menu font size but they don't seem to work with this (or I'm doing it wrong - this is the first time I've really used CSS).

Is there a way to carry over the logic of the above CSS but create a separate styling for mobile?

Website Navigation Menu Issues.PNG

Link to comment
  • Replies 1
  • Views 758
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.