Jump to content

Adjust Menu items and social links in desktop burger menu without affecting the mobile burger menu items and social links.

Recommended Posts

I've added a hamburger menu to my desktop view and customised some bits, but the problem I'm having is trying to adjust the padding and placement of the menu items and social links on the burger desktop menu without it also changing the padding and placement of the menu items and social links on the mobile menu too. I've tried to look for some custom css to see if this is possible but haven't managed to find anything. Is this something that can be done? 

I've attached screenshots so you can get a clearer idea of what I'm trying to achieve. I want the menu items to be aligned to the right and to align with the "x" and social links at the bottom so it all looks neat and cohesive but I can't do this without affecting the alignment of both the desktop and mobile view at the same time. I can get the menu items in the mobile view in the correct place but then it pushes the menu items on the desktop view way out. 

This is the code I currently have for my menu's. Thank you in advance.

@media screen and (max-width: 5000px) {
  /* Display burger icon at all widths and align right */  
  .header .header-burger {
    display: flex;
    order: 2 !important;
    padding-left: 100 !important;
  /* Make burger menu visible at all widths */  
  .header--menu-open .header-menu {
    opacity: 1;
    visibility: visible;
  /* Hide primary navigation menu */ 
  .header .header-title-nav-wrapper .header-nav {
    display: none;
 /*makes mobile menu NOT full screen*/
.header--menu-open .header-menu {
opacity: 1; visibility: visible;
width: 255; 
margin-left: 0vw;
box-shadow: 12.5px 5px 15px #000}
  /* Moves cart to left and keeps space away from burger*/
.header-actions--right .header-actions-action {
    margin: 0 0 0 -5.799999999999997vw;
/*targets menu text items*/
.header-menu-nav-item a {
    font-size: 24px;
      line-height: 1.2;
      margin: 1.5vh 5vw;
      font-family: standerd

@media screen and (min-width:768px) {
  .header-menu {
        width: 25%

/*targets menu text font*/
.header-menu-nav-item a {
    font-size: 24px;
      font-family: standerd
/*targets menu containters*/
.header-menu-nav-item a {
    position: relative;
      bottom: 0vh;
    display: block;
    margin: 1.4vw vw;
    transition: opacity 250ms cubic-bezier(.4,0,.4,1);

Frame 41.png

Frame 42.png

Link to comment
  • Replies 1
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • 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.