Jump to content

can't center mobile header - help please

Go to solution Solved by Lesum,

Recommended Posts

Posted

For the life of me, I can't figure out how to get my logo image centered on mobile. Looks just slightly off in edit mode, but when I view the live site on my Iphone 12 Pro Max, (1) it's off to the right in portrait mode and (2) WAY off to the right in landscape mode. 

I have a bunch of css that I used to - for mobile only  (1) force a subscribe button to appear in the header, and above the header image (2) make the hamburger menu appear under the nav menu, plus some other mobile styling things. Not sure if one or more of the current code snippets is creating the problem, but I've tried to remove them one by one, and - while it sometimes screws other things up - it doesn't center the logo. 

See below for the site's css plus attached (1) screenshots of all other mobile header-related settings and (2) what I see on my Iphone.

Thanks in advance for your help.

/* MOBILE nav menu font size */
.header-menu-nav-item a {
font-size: 15px;
}
/* MOBILE nav menu appearance */
@media screen and (max-width:767px) {
.header--menu-open .header-menu .header-menu-bg {
    background-color: rgba(247,239,238,0.8
);
}
}
/* nav menu - stop stacking */

/* MOBILE chg spacing - mobile menu links */
.header-menu {
  padding:0px 30px;
}
.header-menu-nav-item {
  margin: 20px 0;
}

/* MOBILE nav menu vertical align top */
[data-folder="root"]>.header-menu-nav-folder-content {
    justify-content: flex-start;
}


/* MOBILE - make header button show */
@media screen and (max-width:767px) {
.header-actions.header-actions--right {
    display: block !important;
}
}
.header-actions-action.header-actions-action--cta {
    display: block;
    position: relative;
    left: -40px;
}


/* MOBILE make header button smaller on mobile*/
@media screen and (max-width:767px) {
a.sqs-block-button-element--large.sqs-block-button-element {
    font-size: 8px;
}
}

/* MOBILE - fix mobile header height?*/
@media screen and (max-width:767px) {
.tweak-fixed-header .header .header-announcement-bar-wrapper {
    padding-top: 1vw !important;
    padding-bottom: 1vw !important;
}
}
/* MOBILE - move burger menu under mobile logo */
div.header-display-mobile {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

/*MOVING THE MOBILE MENU BUTTON IN SQUARESPACE 7.1 CLOSER TO THE LINKS*/


//mobile nav menu vertical align top//
[data-folder="root"]>.header-menu-nav-folder-content {
    justify-content: flex-start;
}

@media only screen and (max-width: 767px) {
p, h1, h2, h3, h4 {
text-align: center !important
}
}

// Center Site Title //

@media only screen and (max-width: 640px) { .header-title-text {
    width: 120% !important;
    text-align: center !important;
}
}

/* Header Nav Width Adjustment */
.header-layout-branding-center-nav-center .header-title-nav-wrapper {
  flex: 2 0 100%;
}
.header-layout-branding-center-nav-center .header-actions--right {
  position: relative;
  right: 4vw;
}

/* NEWSLETTER block formatting */

.newsletter-form-field-element { 

background: #ffffff
 !important;

border: solid 1px #000000 !important; 
}

/* more more */


/* Remove newsletter header padding globally */

.newsletter-block .newsletter-form-header-description p {

  display: none

}
/* newsletter padding - input field height and button padding */
.newsletter-block {padding-top: 0; padding-bottom: 0}
.sqs-block-newsletter .newsletter-form-field-element {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

button.newsletter-form-button.sqs-system-button {
    padding-top: 6px !important;
    padding-bottom: 6px !important;

Screenshot 2024-06-20 at 4.05.39 PM.png

Screenshot 2024-06-20 at 4.04.57 PM.png

IMG_0356.PNG

IMG_0357.PNG

  • Solution
Posted

@gbt64 Hi! There are some errors in the code that are causing the issues. Both the header logo and buttons aren't centered. Try adding the following code under Custom CSS, below all the code you've added so far.

@media only screen and (max-width: 767px) {
#header .header-title-nav-wrapper {
    flex: 1 0 100% !important;
    margin-left: unset !important;
}
#header .header-mobile-logo {
    padding-left: 0px !important;
}
#header .header-actions-action.header-actions-action--cta  {
  left: unset !important;
}
#header .header-layout-branding-center-nav-center .header-actions--right {
    display: flex !important;
    justify-content: center !important;
    right: unset !important;
}   
}

Let me know how it goes. Thanks! 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

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.