I had a menu with links into another pages (with same menu) Now I add scrollspy on home page and add sections from home page into menu. Now my menu looks like:
<li class="">Home</li>
<li class="">Foo</li>
<li class="">Boo</li>
<li class="">Moo</li>
But scrollspy doesn't work. When I remove "/home/" from section links scrollspy works but menu works only on home page. Is possible do what I need?
My solution is check on server side whether I am on a home page and If not I am adding /home before section part.
So my code now looks like:
<li class="">Home</li>
<li class="">Foo</li>
<li class="">Boo</li>
<li class="">Moo</li>
Code for server side is in scala (I am using play framework) but in php and whatever else it would be similar.
Related
I have 3 menus with subitems in my navbar, those subitems are linked to specific sections id of the main page as such:
<ul id="navbar">
<li id="idli1" class="listli">
navbar-Item1
</li>
<li id="idli2" class="listli">
navbar-Item2
<ul class="sublist">
<li id="idsubli1" class="sublistli">
sub-Item 1</li>
<li id="idsubli2" class="sublistli">
sub-Item 2</li>
<li id="idsubli3" class="sublistli">
sub-Item 3</li>
</ul>
</li>
<li id="idli3" class="listli">
navbar-Item3
</li>
</ul>
On desktop everything works fine.
On mobile the link seems to not be valid, the formula https://www.site.co/page/#id doesn't work.
Clicking on the submenu just close the submenu.
If i remove the section id from the link, the subitem works and goes to the page.
you can check the menu here
am i missing something about mobile and anchors?
i really don't understand what is the problem about those links.
on mobile your navbar collapse from what I have seen so maybe its being assigned an id that you have used in your menu already thus the link won't work - ids should be unique
I have a navigation bar whose links go to the anchors on the home page.
I wished on another page that these links also arrive on the home page and towards the anchors.
Here is my code.
Thanking you,
<li role="presentation" class="nav-item active">
Portfolio
</li>
...
<section id="portfolio">
Your question: How can I link to my portfolio on my homepage from another page.
My answer: Link using Go to my portfolio on my homepage on/from the other page
Other discussion:
Why not
<li role="presentation" class="nav-item active">
Portfolio
</li>
I assume you have some kind of scroller. If you do, you need to reuse it with the hash of the page you are on.
It is such that I have a menu where there is a border in the page you're into, just currently the whole time on the index page, but if I click onto the news as it should be less.
I have tried so many ways but none of them works, think a little that you can do it with something GET?
This means that it must move to find the page you are on, and view page not in the menu so it should not be there.
there are border in Home, how can I do so that, for example, I go into the info then border under the info and not the front, what should I do there?
<div class="pi-header-block pi-pull-right">
<ul class="pi-simple-menu pi-has-hover-border pi-full-height pi-hidden-sm">
<li class="pi-has-dropdown active"><span>Forside</span></li>
<li class="pi-has-dropdown"><span>Info</span></li>
<li class="pi-has-dropdown"><span>Nyhed</span></li>
<li class="pi-has-dropdown"><span>Team</span></li>
<li class="pi-has-dropdown"><span>Kontakt</span></li>
<li class="pi-has-dropdown"><span>Opret bruger</span></li>
</ul>
</div>
Ses image HER
Here you can see how my menu appears when I click on the info.
The answer is as simple as this: see the pi-has-dropdown active part. If you don't want it, just remove it. If you want it in other pages, add it to each page, for example in Info, like this:
<div class="pi-header-block pi-pull-right">
<ul class="pi-simple-menu pi-has-hover-border pi-full-height pi-hidden-sm">
<li class="pi-has-dropdown"><span>Forside</span></li>
<li class="pi-has-dropdown active"><span>Info</span></li>
<li class="pi-has-dropdown"><span>Nyhed</span></li>
<li class="pi-has-dropdown"><span>Team</span></li>
<li class="pi-has-dropdown"><span>Kontakt</span></li>
<li class="pi-has-dropdown"><span>Opret bruger</span></li>
</ul>
</div>
. You usually do this with the help of a CMS or some JS/Jquery coding, but you could totally hard code it on each page if you want. This way, you need to copy this snippet of code on each page, only changing the active class keeping in mind in which page are you. As simple as that
I'm trying to pull off the following Top Bar with Zurb Foundation.
(I'm aware of how to do this with plain HTML...trying to figure out the correct way to do it using Foundation, though.)
So you've got the title-area name on the left (which works fine), and on the right the "Hi, Joe!" is just plain text and then the "Change Settings" and "Log out" are each links (which doesn't work).
Here's what's happening when I build that out...
And here's the code I'm using...
<nav class="top-bar">
<ul class="title-area">
<li class="name"><h1>Acme Company</h1></li>
<li class="toggle-topbar"></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li>Hi, Joe!</li>
<li>
Change Settings | Log out
</li>
</ul>
</section>
</nav>
So how can I get Foundation to work with my original design example above?
Foundation uses the a tag to style it. You're better off putting them in two separate li tags.
e.g.
<li><a href='#'>Change Settings</a></li>
<li class='divider'></li> <!-- built into foundation -->
<li><a href='#'>Log out</a></li>
Your Hi, Joe! should go in a blank a tag also.
I hope this is a very simple question (I'm only using bootstrap since today), but how do I show a new page when someone clicks on a navbar item?
For example, I have this code:
<ul class="nav">
<li class="active">Home</li>
<li>Getting there</li>
<li>Japanese theme</li>
<li>Photos</li>
<li>RSVP</li>
</ul>
But how do I switch page when someone clicks on say, "Photos"?
I don't want to refresh the page and I'd prefer to do it all using AJAX.
Many thanks in advance,
As Alp says, Twitter bootstrap doesn't handle this functionality. I use PHP server side and AJAX client side to show/hide new content.