Canvas Support

Having top bar and social icons appear in sticky menu

6 replies · opened Jul 28, 2016

JjennhelmondJul 28, 2016

Good evening... hoping someone can help me. I have a top navigation system created with a "top bar" div, followed by a sticky header. I want the top bar to remain visible, just like the rest of the navigation system, when people scroll down the page. My navigation coding looks like this. Any ideas?

<!-- Top Bar
============================================= -->
<div id="top-bar" class="transparent-topbar dark">

		&lt;div class="container clearfix center"&gt;
        
				&lt;!-- Top Social
				============================================= --&gt;
				&lt;div id="top-social"&gt;

  •               &lt;/div&gt;&lt;!-- #top-social end --&gt;

      &lt;/div&gt;

  &lt;/div&gt;&lt;!-- #top-bar end --&gt;
  
  &lt;!-- Header
  ============================================= --&gt;
  &lt;header id="header" class="sticky-style-2"&gt;

      &lt;div id="header-wrap"&gt;

          &lt;!-- Primary Navigation
          ============================================= --&gt;
          &lt;nav id="primary-menu" class="style-2 center"&gt;

              &lt;div class="container clearfix"&gt;

                  &lt;div id="primary-menu-trigger"&gt;&lt;i class="icon-reorder"&gt;&lt;/i&gt;&lt;/div&gt;

                  
                      &lt;li class="@@(_document['home_class'])@@"&gt;[HOME](../index-final.html)
                      &lt;li class="@@(_document['tickets_class'])@@"&gt;[TICKETS](../tickets.html)
                      &lt;li class="@@(_document['faqs_class'])@@"&gt;[FAQs](../faqs.html)
                      &lt;li class="@@(_document['walper_class'])@@"&gt;[THE WALPER HOTEL](../walper.html)
                      &lt;li class="@@(_document['davidstorm_class'])@@"&gt;[DAVID STORM](../davidstorm.html)
                      &lt;li class="@@(_document['bookings_class'])@@"&gt;[CORPORATE BOOKINGS](../bookings.html)
                      &lt;li class="@@(_document['media_class'])@@"&gt;[MEDIA](../media.html)
                  

              &lt;/div&gt;

          &lt;/nav&gt;&lt;!-- #primary-menu end --&gt;

      &lt;/div&gt;

  &lt;/header&gt;&lt;!-- #header end --&gt;
JjennhelmondJul 28, 2016

I think I have looked through every attached js and css file multiple times, and can't see where it is defined for the sticky menu to make the top-menu disappear on screen scroll...

SSemicolon WebSTAFFJul 28, 2016

Hello,

This is Definitely Possible. However, minor CSS Customization is required. Simply add the following CSS Code: 

@media (min-width: 1200px) {
	#top-bar {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 299;
		background-color: #FFF;
	}

	#header { margin-top: 45px; }

	#header.sticky-header #header-wrap { top: 45px; }
}

and then add data-sticky-offset="100" Attribute to the #header Tag. This will definitely work fine.

Let us know if we can help you with anything else or if you find any further issues.

JjennhelmondJul 28, 2016

Thanks so much!!!!! I don't know how many hours I spent trying to figure out the right combination of changes to make that work.

One more issue though - when you scroll down the page, the background of the menu bar grows bigger before sizing back to the original size. It looks quite jumpy. You can see the issue at http://www.theruse.ca/index-final.html

The other issue is that on load the client says the fonts appear bold until the video loads, and then switches back to regular font.

You have saved me SOOO much trouble. I really appreciate it.

JjennhelmondJul 28, 2016

On my website, when you scroll down the page, the background of the menu bar grows bigger before sizing back to the original size. It looks quite jumpy. You can see the issue at http://www.theruse.ca/index-final.html

The other issue is that on load the client says the fonts appear bold until the video loads, and then switches back to regular font.

If you have any suggestions it would be greatly appreciated.

JjennhelmondJul 29, 2016

On my website, when you scroll down the page, the background of the menu bar grows bigger before sizing back to the original size. It looks quite jumpy. You can see the issue at http://www.theruse.ca/

The other issue is that on load the client says the fonts appear bold until the video loads, and then switches back to regular font.

If you have any suggestions it would be greatly appreciated.

SSemicolon WebSTAFFAug 7, 2016

Hello,

[sb_private_reply]We Really Apologize about the Delay in replying to your Support Query and Truly Truly appreciate your Patience with us![/sb_private_reply]

  1. The issue you are facing here is because of the Customization of the Menu. We have tried checking this out extensively by unfortunately we cannot fix it since there are a Lot of Customizations already made to the Menus. Additionally, according to our analysis, you should consider altering the data-sticky-offset="100" to 0 Value to make the Header Sticky immediately which may solve the issue.

  2. We have tried checking out the Font Weights on Load but it appears to be working fine for us. Can you please provide us with a Screenshot for this issue so that we can investigate further. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas. Thanks. :)

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