Jump to content

How to affix/align text to (hamburger) icon

Recommended Posts

Site URL: http://www.dolphinbottles.co.uk

Hi,

Here is my current header:

image.thumb.png.ec789f3caba6018a3724f09c20c233fd.png

^This is how I want it to look, however when I change the screen size it moves, which will be obvious as to why when you see the code I am using. I am just not pro enough to know how to fix it.

image.thumb.png.45f99d87ccd2461c59fdb85973d2ef7e.png

^Here is how it looks full screen

Header Code Injection:

<h1 class="menu">Menu</h1>

CSS:

.menu {
position: absolute;
  top: 5.5%;
  left: 3.2%;
  z-index: 99999;
background: none;
color: black;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
}

 

How can I make my 'menu' text anchor to the hamburger menu icon?

password: dolphin

🙂Thanks to anyone who could help

Link to comment
  • Replies 2
  • Views 677
  • Created
  • Last Reply
.burger-box:before {
  content: 'Start Your\AJourney Here';
  padding-bottom: 1em;
  width: auto;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  white-space: pre;
  line-height: 1 !important;
  transform: translateX(0);
  transform: translateY(-100%);
}

 

Link to comment
6 hours ago, rwp said:

.burger-box:before {
  content: 'Start Your\AJourney Here';
  padding-bottom: 1em;
  width: auto;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  white-space: pre;
  line-height: 1 !important;
  transform: translateX(0);
  transform: translateY(-100%);
}

Thanks so much, works perfectly!

 

Link to comment

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.