Adding top navigation with customer log in

Highlighted
Shopify Staff
Shopify Staff
368 0 34

Hey Tamaryn, 

 You would need to adjust the css positioning of your elements. Without seeing a link to your site it is hard to say what you need to edit. But this link can give you an idea of how to set up the css:

http://codepen.io/philhoyt/pen/ujHzd

The css in that codepen uses the elements for targeting which you may be able to adapt for your use here. 

I hope this helps! Feel free to reach out if you have any further questions :)

Cheers,
Ben C - Shopify Guru
Support@Shopify.com

0 Likes
Highlighted
Shopify Partner
13 0 0

Hi Ben,

I intergrated this code by changing the id to from accessibleNav to primary_nav_wrap. That does change the drop down menu style (child links listed horizontally instead of vertically) however the grandchild links are now completely gone.

I have changed the id back to the orignal so that you can have a look at what it did look like and possibly see what i need to change.

here is the link to the site: http://security-guru-3.myshopify.com/ ;

 

Regards,

Tamaryn

0 Likes
Highlighted
Shopify Staff
Shopify Staff
368 0 34

Hey Tamaryn, 

 I didn't mean to copy that code exacty, the code was to give you an idea of how the elements are positioned. I cannot see the second level menu items? Also no need to provide a password :) 

Also it looks like you have a } out of place somewhere in your code. That might be effcting things as I do not see the grand child elements in the HTML after the page is rendered. If you can fix that up I will have another look.

I hope this helps! Feel free to reach out if you have any further questions :)

Cheers,
Ben C - Shopify Guru
Support@Shopify.com

0 Likes
Highlighted
Shopify Partner
13 0 0

Hi Ben, 

I have removed the random } 

You should be able to see all the sub menu items now.

0 Likes
Shopify Partner
13 0 0

Hi Ben,

I have been able to "seperate" the grand child list from the child list and have it in its own "block"

My problem is positioning, I cannot seem to get it to position to the right of the Child list once you hover over the child link handle. When you hover over it, then the grand child list "block" appears over the child link "block", but you cannot see the entire grand child list either, just the first line.

I added this to the css code to get the 2 seperate:

.site-nav--dropdown--sub{
   position:absolute;
   display:none;
   top: -1px;
   border: 1px solid $colorBorder;
   background-color: $colorNav;

}

  .site-nav li.grand:hover> .site-nav--dropdown--sub{
    display: block;
    
}

 

I know I am missing something small that is causing this head ache. Any assitance will be so helpful.

 

 

0 Likes
Highlighted
Shopify Partner
13 0 0

Hi Ben,

I have sorted out my headache :) 

 

Thanks again for you help and patience

0 Likes
Highlighted
New Member
2 0 0

Hi Ben,

 

I'd like to only have one navigation bar, and keep it transparent. My site is www.blosmbotanicals.com

 

I used custom code to eliminate the top bar as I don't like how two layers/levels of menu bars looks. However, I want customers to be able to log in. Is there a way to add the login to be right aligned on the same bar as the menu/navigation easily?

 

Thanks!

0 Likes