venture theme and css navigation

New Member
22 0 0

Ok so in terms of web design capability I am very limited.

I have tried to code the theme.scss file and header.liquid file with the html and css required.

How do i make it so my theme has the store name and navigation menu centred in the header, but making sure it correctly displays on mobile and desktop

Ie navigation menu under store name (centered)

any help would be greatly appriciated

 

Thanks

0 Likes
Shopify Partner
1838 173 559

Hi, this is a question that comes up regularly and there have been several forum threads on the same topic, some with viable solutions.

I haven't tried any of these personally, and the theme does get updated occasionally so older solutions may become outdated, but most of the time these should just work.

Please make a duplicate of your theme before making changes and keep us posted how it goes or you need more specific help.

Best wishes!

I turn coffee in to code - since 1998
0 Likes
New Member
22 0 0

Hi , thanks for the speedy response!,

I have unfourtunately tried that .

have also tried amending the grid table/ item  measurements ,css.grid items myself etc.

nothing works.

Thanks

0 Likes
Shopify Partner
1838 173 559

Okay, so here goes my version then ;-)

Step 1 - Duplicate Theme

Go the Online Store > Themes > Actions drop down and select Duplicate. Always good idea to make a copy in case some of the following code edits break stuff or are irreversible.

Step 2 - Centering the Logo

Go to Online Store > Themes > Actions drop down and select Edit code. Open Sections / header.liquid and find this part of code

  <div class="site-header__upper page-width">
    <div class="grid grid--table">
      <div class="grid__item small--one-quarter medium-up--hide">
        
      <!-- I REMOVED THE CONTENTS HERE FOR BREVITY -->

      </div>
      <div class="grid__item small--one-half medium-up--two-thirds small--text-center">
        
      <!-- I REMOVED THE CONTENTS HERE FOR BREVITY -->

      </div>

      <div class="grid__item small--one-quarter medium-up--one-third text-right">
        
      <!-- I REMOVED THE CONTENTS HERE FOR BREVITY -->

      </div>
    </div>
  </div>

Now take note of the classes we are changing and the one <div /> we are adding.

  <div class="site-header__upper page-width">
    <div class="grid grid--table">
      <div class="grid__item small--one-quarter medium-up--hide">
        
      <!-- I REMOVED THE CONTENTS HERE FOR BREVITY -->

      </div>
      <div class="grid__item medium-up--one-quarter small--hide"></div>
      <div class="grid__item small--one-half medium-up--one-half text-center">
        
      <!-- I REMOVED THE CONTENTS HERE FOR BREVITY -->

      </div>

      <div class="grid__item small--one-quarter medium-up--one-quarter text-right">
        
      <!-- I REMOVED THE CONTENTS HERE FOR BREVITY -->

      </div>
    </div>
  </div>

What we changed / added here is:

  1. Added 1 div element which will take up 1 quarter of available grid space on the left, but only for large sreens. For small screens it is hidden.
  2. Changed the div element class containing the logo to be one-half wide in the grid for both small and large screens
  3. Changed the div element class containing the logo to always center the text
  4. Changed the last div element class containing the search and cart to be one-quarter wide in large screen too

Check it's okay in desktop and mobile views before you proceed.

Step 3 - Centering the Menu

In the same header.liquid as above, look further down for this section of code

  <div id="StickNavWrapper">
    <div id="StickyBar" class="sticky">
      <nav class="nav-bar small--hide" role="navigation" id="StickyNav">
        <div class="page-width">
          <div class="grid grid--table">
            <div class="grid__item {% if shop.customer_accounts_enabled %}four-fifths{% else%}seven-eighths{% endif %}" id="SiteNavParent">

              <!-- I REMOVED THE CONTENTS HERE FOR BREVITY -->
              
            </div>
            <div class="grid__item {% if shop.customer_accounts_enabled %}one-fifth{% else%}one-eighth{% endif %} text-right">
              
              <!-- I REMOVED THE CONTENTS HERE FOR BREVITY -->

            </div>
          </div>

And we will do something similar to what we did before

  <div id="StickNavWrapper">
    <div id="StickyBar" class="sticky">
      <nav class="nav-bar small--hide" role="navigation" id="StickyNav">
        <div class="page-width">
          <div class="grid grid--table">
            <div class="grid__item {% if shop.customer_accounts_enabled %}one-sixth{% else%}one-eighth{% endif %}"></div>
            <div class="grid__item {% if shop.customer_accounts_enabled %}four-sixths{% else%}six-eighths{% endif %}" id="SiteNavParent">

              <!-- I REMOVED THE CONTENTS HERE FOR BREVITY -->
              
            </div>
            <div class="grid__item {% if shop.customer_accounts_enabled %}one-sixth{% else%}one-eighth{% endif %} text-right">
              
              <!-- I REMOVED THE CONTENTS HERE FOR BREVITY -->

            </div>
          </div>

What we changed / added here is:

  1. Added 1 div element which will take up 1 sixth or 1 eighth of available grid space on the left, depending on whether customer is logged in or not. This serves to equal out the grid items and thus effectively center the menu div.
  2. Changed the div element class containing the menu to be four-sixths or six-eighths wide in the grid depending on whether the customer is logged in or not.
  3. Changed the last div element class containing the account link etc. to be one-sixth or one-eighths wide in the grid depending on whether the customer is logged in or not.

Again check dekstop and mobile views.

Hope this helps!

I turn coffee in to code - since 1998
0 Likes
Shopify Partner
1838 173 559

Aah blimey, just realized that for Step 3 - Centering the Menu I jumped too fast. Let me get back to that one later as soon as I can. Meanwhile the logo change is fine.

Sorry for the confusion

I turn coffee in to code - since 1998
0 Likes
New Member
22 0 0

No problem at all , 

any help is appriciated.

!

0 Likes
Shopify Partner
1838 173 559

Okay, so it works fine as is.

However, because we are dividing the grid in 6 parts for the menu, it leaves a bit too much space to either side and thus the menu items switch in to burger menu mode sooner as they get squished up.

Depending on how many top level menu items you have, that may or may not be an issue for you.

If it is an issue and you dislike the burger menu mode creeping up on visitors too soon, you can change from one-sixth to one-eighth and four-sixths to six-eighths in the Step 3 code. That would alleviate the issue a bit by givving you just that little bit of extra space for your menu items.

Best wishes!

I turn coffee in to code - since 1998
0 Likes
New Member
22 0 0

For some reason unfourtunately this hasnt worked .

after multiple attempts trying to fix :( 

 

0 Likes
Shopify Partner
1838 173 559

No problem, can you describe the behavior - is it not centering?

I turn coffee in to code - since 1998
0 Likes
New Member
22 0 0

it doesnt seem to do anything,

its not showing any changes

 

0 Likes