Jump to content

Keenan1

Member
  • Posts

    13
  • Joined

  • Last visited

Posts posted by Keenan1

  1. Hi @tuanphan

    Thanks for your help so far.

    On mobile - it seems to look a little different for me (across devices and browers).

    With your code - it renders like the screenshot attached "Code A".

    I have tweaked the size of the icon so it matches, using the following code, so that it now looks like "Code B".
     

    div.header-burger {
        flex-direction: row-reverse;
        align-items: center;
    }
    .mobile-phone {
        position: relative;
        position: relative;
        left: -10px;
        top: -6px;
         font-size: 20px
    }
    a.mobile-phone {
        color: white;
    }

    My question is - the hamburger icon is now sitting too close to the right-hand side edge.


    What CSS can I add to move both the icon and hamburger over slightly from the edge of the screen, so that the margin matches the body of the page (indicated by the red line)?

     

    Many thanks

    Code A.jpeg

    Code B.jpeg

  2. Thank you so much, @tuanphan

    I'd like to tweak the icon slightly -

    - Bigger - so that it's the same height as the hamburger menu icon

    - Make it white

     

    What extra CSS would I need to include?

    Also - is it possibly moving the menu icon over to the right? It seems to be doing this when I view it on my mobile (although it doesn't' behave the same in the Squarespace "mobile view" on the desktop editor).

     

    Many thanks

     

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