Canvas Support

One-page-menu in demo-medical

6 replies·opened Sep 26, 2016
U
uwe64Sep 26, 2016

The demo-medical page obviously is a one-pager. The demo navigation isn't working and the primary-menu-style isn't for a onepager. So how do I get the effect that the chosen section is highlighted in the primary-menu?
I tried this instead the code in the demo-medical.html: 

<nav id="primary-menu" class="style-3">

	<ul class="one-page-menu" data-easing="easeInOutExpo" data-speed="1250" data-offset="65">
		<li><a href="#"><div>Startseite</div></a></li>
		<li><a href="#"><div>Praxis</div></a></li>
		<li><a href="#"><div>Leistungsspektrum</div></a></li>
		<li><a href="#"><div>Ärzte</div></a></li>
		<li><a href="#"><div>Team</div></a></li>
		<li><a href="#"><div>Kontakt</div></a></li>
	</ul>

</nav><!-- #primary-menu end -->
S
SemiColonWebSTAFFSep 27, 2016

Hello,

Using the One Page Functionality on the Medical Demos is Definitely Possible. Please follow the Steps below:

  1. Please consider replacing the Existing Primary Menu Code with the following:
<!-- Primary Navigation
============================================= -->
<nav id="primary-menu" class="style-3">

	<ul class="one-page-menu" data-easing="easeInOutExpo" data-speed="1500">
		<li class="current"><a href="#" data-href="#section-home"><div>Home</div></a></li>
		<li><a href="#" data-href="#section-about"><div>About Us</div></a></li>
		<li><a href="#" data-href="#section-departments"><div>Departments</div></a></li>
		<li><a href="#" data-href="#section-services"><div>Services</div></a></li>
		<li><a href="#" data-href="#section-doctors"><div>Doctors</div></a></li>
		<li><a href="#" data-href="#section-blog"><div>Blog</div></a></li>
		<li><a href="#" data-href="#section-contact"><div>Contact</div></a></li>
	</ul>

</nav><!-- #primary-menu end -->
  1. Make sure that you have added the Appropriate ID for the One Page Sections on the Page that matches the data-href Value in the Primary Menus. Additionally, also make sure that you have added the .page-section Class to the One Page Section. Example:
<div id="section-about" class="page-section">
	...
</div>

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

U
uwe64Sep 27, 2016

Thanks for the reply. I tried as you said but it doesn't work. Do I have to change the css?

I didn't change the css of the demo-template:

<!-- Stylesheets
============================================= -->
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,400italic,600,700|Montserrat:400,700|Crete+Round:400italic" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="css/swiper.css" type="text/css" />

&lt;!-- Medical Demo Specific Stylesheet --&gt;
&lt;link rel="stylesheet" href="medical.css" type="text/css" /&gt;
&lt;!-- / --&gt;

&lt;link rel="stylesheet" href="css/dark.css" type="text/css" /&gt;
&lt;link rel="stylesheet" href="css/font-icons.css" type="text/css" /&gt;
&lt;link rel="stylesheet" href="css/medical-icons.css" type="text/css" /&gt;
&lt;link rel="stylesheet" href="css/animate.css" type="text/css" /&gt;
&lt;link rel="stylesheet" href="css/magnific-popup.css" type="text/css" /&gt;

&lt;link rel="stylesheet" href="fonts.css" type="text/css" /&gt;

&lt;link rel="stylesheet" href="css/responsive.css" type="text/css" /&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
S
SemiColonWebSTAFFSep 29, 2016

Hello,

You are not required to change the CSS of the Template in order for it work, there appears some other issue. Can you please provide us with a Live URL so that we can check out the exact issue and provide you with a more accurate solution for this. 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.

U
uwe64Sep 29, 2016

Could you also please check the Footer Navigation which doesn't work too. Thanks.

S
SemiColonWebSTAFFSep 30, 2016

Hello,

We have just checked out your Website and the Issue is that you will need to add the .one-page-menu Class to the <ul> Tag which has the One Page Menu Items. Example: 

<ul class="one-page-menu" data-easing="easeInOutExpo" data-speed="1500">
    ...
</ul>

This will definitely fix your issue. 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