Canvas Support

move top nav div into primary menu

6 replies · opened Jun 2, 2016

HheadrushJun 2, 2016

is there a way I can have a secondary nav list that resides in the top section of the primary menu.

I want to replicate this layout:
www.jive.com/

I know there is a top nav ID/class which is okay but my client doesnt want the top nav to be above the logo, so im thinking is there a way to have this in the primary nav rather than as a separate div? Or some othr way

I am using the static sticky class so that I have fixed 100px height nav bar at all times.

Is there any way I can position it so that it occupies the top half of the primary nav and then the primary nav resides in the lower bottom half.

Would need it to somehow remain in place and be visible through large,meduim and small if possible as it will only have 4 short links.

Thanks
Matt

HheadrushJun 3, 2016

here is my attempt which is part way there.

I have added a primary-menu2 class

I assigned the class to a div which has absolute positioning within the primary menu div so it sits above the primary main menu.
please see:

http://matthewardmills.co.uk/OPL4/side-panel-left-overlay-9.html

Thing is I cant figure out the responsive media queries that would make the primary-menu2 ID reduce well at small and xsmall. I would like to make the phone number hide at small,xs and xxs. And have maybe just the icons for help download buy and language display without the text.

I would also like to move the main nav down a little so that it sits toward the bottom (say 20px up) from the bottom of the primary-menu div, would it be best to achieve that with top-margin.

One more question that is if you click the layout icon it triggers the sidebar which I have positioned 100px down so that the logo is revealed at all times, I want to have the static-sticky nav across all screen sizes so that when at small and so on the nav bar doesn't scroll and leave the space above the sidebar.

thanks for your help, you guys have really been great with support

Best Matt

I need to move the original

HheadrushJun 6, 2016

Hello... any update on this please, just want to know whether it's achievable.
you did answer the last question about the fixed position sidebar in another post, but unfortunately the solution didn't seem to work :(

HheadrushJun 7, 2016

Hello Guys, any feedback please even if there is no solution in place, no response in 4 days now is a long time... anything ?

HheadrushJun 8, 2016

Thank you so much for taking the time to do this.

There are a couple of issues.

When reducing the browser window from xl to lg is fine but then there is a stage where the icons all become out of line and the whole nav bar expands in height, its not for long but can that be fixed, also I noticed that the main nav in xl and lg seems good but then once it goes to md and the icon only these have move up and are no longer in same position that they were, the padding bottom seems to increase. I have attached an image that shows both issues.

thank You

SSemicolon WebSTAFFJun 9, 2016

Hello,

  1. This issue unfortunately cannot be rectified as the Media Queries CSS take center-stage while Resizing the Browser. So, the elements starts falling in place but when the Browser is resizing completes, the responsiveness works fine. Ultimately, when the User views your Website, they will most likely not Resize the Browser and so they will not encounter this issue.

  2. We have actually done this for a Cleaner look in the Mobile Devices. But after your Message regarding this we realize that this would not be a Good Practice as it is not uniform on all Devices. So you can modify the CSS Codes provided the Document <head> with the following:

#top-search a,
#top-cart,
#primary-menu-trigger {
	margin: 0;
	top: 60px;
}

#primary-menu-trigger {
	top: 45px;
	left: auto;
	right: 58px;
}

#top-cart .top-cart-content { top: 60px; }

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard