Porto – Help with Menu Bar

Home › Forums › Porto – Responsive HTML5 Template › Porto – Help with Menu Bar

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • September 18, 2015 at 6:00 am #10010611
    aayushij
    Participant

    The headers are need are – Home, About Us, Our Services, Blog & Contact us.

    Do not want any of those menu items appearing underneath. So, basically, we have tried to turn the index-classic.html to a single pager site.

    Can you help?

    September 18, 2015 at 1:24 pm #10010618
    Support
    Keymaster

    Hello,

    1) Change the BODY of the page to:

    <body data-target="#header" data-spy="scroll" data-offset="100">

    2) Use this as the NAV:

    <nav>
	<ul class="nav nav-pills" id="mainNav">
		<li>
			<a data-hash data-hash-offset="85" href="#home">Home</a>
		</li>
		<li>
			<a data-hash data-hash-offset="85" href="#about">About Us</a>
		</li>
		<li>
			<a data-hash data-hash-offset="85" href="#services">Services</a>
		</li>
		<li>
			<a data-hash data-hash-offset="85" href="#blog">Blog</a>
		</li>
		<li>
			<a data-hash data-hash-offset="85" href="#contact">Contact Us</a>
		</li>
	</ul>
</nav>

    3) Add the ID in each area you want to link:

    Let me know if you have any questions.

    Kind Regards, Jonas

    September 19, 2015 at 4:02 am #10010633
    aayushij
    Participant

    Unable to follow! Can you explain it this way – which line numbers to replace with which code? Thanks in advance 🙂

    September 20, 2015 at 6:28 pm #10010646
    Support
    Keymaster
    This reply has been marked as private.
    September 21, 2015 at 3:38 am #10010653
    aayushij
    Participant
    This reply has been marked as private.
    September 21, 2015 at 3:40 am #10010654
    aayushij
    Participant
    This reply has been marked as private.
    September 21, 2015 at 10:15 am #10010661
    Support
    Keymaster

    Hello,

    This is the BODY tag I mentioned:

    All you need to do is to replace that to:

    <body data-target="#header" data-spy="scroll" data-offset="100">

    Let me know if you have any questions.

    Kind Regards, Jonas

    September 22, 2015 at 6:16 am #10010684
    aayushij
    Participant
    This reply has been marked as private.
    September 22, 2015 at 11:01 am #10010690
    Support
    Keymaster

    Hello, OK, to fix that please add this:

    (css/custom.css)

    #header ul.nav-pills > li.active > a:hover,
#header ul.nav-pills > li.active > a:focus {
	background: #0088cc !important;
}

    Please try that and let me know if you need further assistance.

    Kind Regards, Jonas

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)

This topic is marked as "RESOLVED" and can not rceive new replies.