brine theme mobile header tweaks- remove all mobile styling? make mobile look as close to desktop as possible

Site URL: https://plane-tunny-45nr.squarespace.com/

https://plane-tunny-45nr.squarespace.com/ password=test

Hello!

I am very happy with the way my site looks until I view it on mobile- the header looks awful on mobile but unfortunately the brine theme does not allow disabling of mobile styles

How can I make the mobile site render as close to the desktop version as possible? I have the personal plan so cannot do injected CSS, only custom CSS via the design menu

I would be interested in completely avoiding all mobile re-styling if possible- but if this is not possible I would like to make the mobile navigation render as close to the desktop navigation as possible

I have tried to use the following code to bring the logo and header down to overlap with the banner but it does not seem to work- can anyone recommend code or any other solutions to bring the header down to overlap with the banner? Also would LOVE to find a way to make the rest of the navigation render the same way it does on desktop ie. the boxes that say CONTACT, TEXTS, ARCHIVE rather than having to click into the menus

/*Custom CSS Code for Brine Template – by mcdigitaldesign.com.au*/

/*Mobile Header Bar – Sit Over Banner Image*/

.Mobile-bar-branding { z-index:3 !important;}
.Mobile-bar-branding {position:absolute;}
.Mobile-bar-menu {
   z-index:3;
   padding-top: 60px;
}

.Mobile-bar {
   position:absolute;
}

/*Mobile Header Bar – Padding*/

.has-logo-image .Mobile-bar-branding {
   line-height: 0;
   padding-top: 60px;
}

/*Mobile Bottom Bar – fixed*/

.Mobile-bar–bottom {
   position: fixed !important;
}

/*Mobile Banner Content – Padding*/

@media only screen and (max-width: 1060px) {
.Intro-content {
   padding-top: 150px !Important;
   }
}

Hi  @annahahn1993, It's Quite easy Let me share a code with you in few hours 🙂 as soon as I get free. 

15 minutes ago, humxahafeex said:

Hi  @annahahn1993, It's Quite easy Let me share a code with you in few hours 🙂 as soon as I get free. 

Wonderful thank you so so much for your help!! I am hoping to make the mobile nav menu match the desktop including the presence of the ARCHIVE, CONTACT, and TEXTS boxes- if you have any advice/code on how to achieve all of this in addition to making the header logo overlap with the banner this would all be infinitely appreciated!!

Thank you so so much again!!

NOTE : This solution works Work Perfectly Fine for "BRINE" Template but the code is specific to the website  in question. To get it working for your website you can use the same code but you have to play around with it little bit to get it work properly.

Hi @annahahn1993 Here you go , Just delete the previous code you been using for this purpose and add the following code to your Design>CSS section  It worked perfectly fine when I tested on my end.Hope it works for you as well 🙂

Screnshot is attahced how it will look after adding the code.

@media only screen and (max-width: 640px){
    /*hide mobile header*/
    .Mobile-bar {
      display:none;
    }
    /*display desktop header*/
    .Header--top {
      height:0px;
      display:none !Important;
      background: #fff;
      -webkit-font-smoothing:        subpixel-antialiased;
      -moz-osx-font-smoothing: auto;
  }

    .Header--bottom {
      height:50px;
      display:block !important;
      background-color: #fff;
      -webkit-font-smoothing: subpixel-antialiased;
      -moz-osx-font-smoothing: auto;
  }

    [data-nc-base="header"] [data-nc-group="bottom"] {
      display:block !important;
  }

    .ancillary-header-secondary-nav-position-bottom-right.has-secondary-nav [data-nc-base="header"] [data-nc-container="bottom-right"][data-nc-container], .ancillary-header-social-position-bottom-right.has-social [data-nc-base="header"] [data-nc-container="bottom-right"][data-nc-container] {
      display: inline-block !important;

  }
    [data-nc-base="header"] [data-nc-group="bottom"] {
      display: block;
  }
    [data-nc-base="header"] [data-nc-container="bottom-left"] {
      text-align: center !important;
      display: block !important;
  }
    [data-nc-base="header"] [data-nc-container="bottom-center"] {
      display: block !important;

  }
    [data-nc-base="header"] [data-nc-container="bottom-right"] {
      height:50px;
      display:block !important;
  }
    [data-nc-base="header"] [data-nc-group="top"] {
  display: block;
  }
      .Header-nav--secondary>.Header-nav-inner>.Header-nav-item{
         font-size:14px;                                    
      }
      .Header [data-nc-element] {
      padding:0px;
  }
      .Header--bottom.Header--overlay{
       margin-top:3em;                                        
      }

      .Header-nav--secondary .Header-nav-item {
      padding: 4px;
      margin: .34em;
  }
      /*SPECIFIC TO WEBSITE STYLES*/
      .Header-inner--bottom {
      padding-top: 20px !important;
  }

  .has-site-title .Header-branding {
    font-size: 38px !important; 
  }
  .Header-nav {
      font-size: 25px !important;

  }
  .Header-nav--primary{
    text-align:center !important;
  }
  .Header-nav-inner{
    text-align:center !important;
  }
  .Header-nav-inner{
  margin: 5px !important;
  }
 
}

Do let me know if it Works or not , If It did Don't forget to mark this question as solved by clicking arrow up on top left of this answer 🙂

@humxahafeex thank you so so much for this- this is incredible and almost completely fixed the issue

I have 2 questions~
 

1. right now the nav bar looks absolutely perfect thank you so so much🙌🙌🙌🙌🙌🙌🙌 the only issue is that on blog posts the nav bar overlaps with the blog post title on mobile (see screen cap) - is there any way the code can be appended to fix this?

2. This strange thing happens on mobile when I view on mobile, if you have the site open and are scrolling down, then scroll to the right side, somehow the site gets confused and there becomes this weird blank nether zone where the site has no background in one third of the screen and all of them elements are kinda stuck halfway outside of the viewport-any idea what is going on/thoughts on an easy way to prevent this? (also attached image below)