How do I put Navigation beside logo/site title under header?( Developer mode Base template)

Vincent5860 · May 18, 2020

Hi guys,

I have been working on site.region file and tried to put navigation bar and site title/logo all under header section, to make them beside each other.

However, the base template may lack of some css or class which is not included in the base template.

Does anyone know how can I make them in the same line? Do I need something like flexbox css like divide column?

site.region

<!doctype html>

<html>

   <head>
       <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
       <meta name="viewport" content="initial-scale=1" />
       {squarespace-headers}
   </head>

{.section website}

<div data-content-field="site-title" class="site-title {.section logoImageUrl}has-logo-image{.end}">
                       <a href="/" class="site-title-link">
                           {.section logoImageUrl}
                           <img src="{logoImageUrl}?format=original" class="site-logo-image" alt="{siteTitle}" />
                           {.or}
                               {siteTitle}
                           {.end}

                       </a>
                       
       <nav class="nav">

<input type="checkbox" id="nav-mobile-checkbox" class="nav-mobile-checkbox" />

<header class="nav-mobile-header">

<label for="nav-mobile-checkbox" class="nav-mobile-menu-label" onclick>
                   <span class="svg-fallback">☰</span>
                   <svg width="12" height="10" xmlns="http://www.w3.org/2000/svg" version="1.1"><path class="burger" d="M0,1 12,1" stroke="#ffffff" stroke-width="2"/><path class="burger" d="M0,5 12,5" stroke="#ffffff" stroke-width="2"/><path class="burger" d="M0,9 12,9" stroke="#ffffff" stroke-width="2"/></svg>
               </label>

{.section website}
               <h1 data-content-field="site-title" class="nav-mobile-site-title site-title">
                   <a href="/" class="nav-mobile-site-title-link site-title-link">
                       {siteTitle}
                   </a>
               </h1>
               {.end}

<div class="nav-mobile-cart">CART</div>

</header>

<squarespace:navigation navigationId="mainNav" template="navigation" />

</div>

</nav>
                   </div>

{.section siteTagLine}<p class="site-tagline">{@}</p>{.end}

{.end}

</div>

</header>

           <div class="content-container primary-wrapper">
               <div class="content-legible" data-content-field="main-content">
                   {squarespace.main-content}
               </div>
           </div>

</main>

</footer>

       {squarespace-footers}
       <squarespace:script src="site-bundle.js" combo="false"/>
   </body>
</html>

tuanphan · May 19, 2020

It seems you solved?

Vincent5860 · May 21, 2020

@tuanphan,

I made flexbox as the style of the class "header-container"

I found out that <squarespace:navigation navigationId="mainNav" template="navigation" /> is the navigation bar showing up on desktop web.

However, when I move the nav section in the header, the nav bar would not work when I use mobile to view the page.

How do I put Navigation beside logo/site title under header?( Developer mode Base template)

Recommended Posts

Vincent5860

Link to comment

tuanphan

Link to comment

Vincent5860

Link to comment

Archived

News

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources