I'm having some trouble with anchors on my page. When I am on the page, and click on an anchor in the dropdown menu "Our services" it goes to the right place. But when I click on the logo "NCK", and then click on one of the anchors in the dropdown menu, it doesn't go to the right place? How can that be?
Link to page, to see HTML and error
change link "/rwd/Our-services#projectmanagement" to "#projectmanagement" (doing this for all other links also)
OR
simply remove default event of all links of dropdown which has problem with this code
$('#yourdropdownlink1_ID').click(function(event){
event.preventDefault();
});
use above code for all dropdown links
Related
I have a website (that is quite long so, you need to scroll) that lists some tutorials/presentations.
For the convenience I decided to create a menu on the top of the page, where the user can click on it and jump to the right place (on the same page). The code for the menu:
<ul>
<li>Tutorial 1</li>
...
</>
So now on the site, I have couple of hidden anchors, that look the following:
<p><a name="tutorial1" ></a></p>
The idea is, that the user clicks on the link and jumps to the right spot on the website.
BUT there is a Problem: The site's template has a menu on the top, that is always visible (also when you scroll). So whats happening is that when I click on a menu item the correct spot is covered by this menu. So what I actually want is that after the click the site jumps to the achnor minus the offset, that is created by this menu.
So I was wondering, whether I could achieve this by adding some CSS to my anchor like here:
<p><a name="tutorial1" style="positioning:relative; top:-60px" ></a></p>
I dont see any effect though. What am I doing wrong?
Make sure you add a semicolon at the end of every CSS property except for the last one.
<p><a name="tutorial1" style="positioning:relative; top:-60px" ></a></p>
You want to set the height of the menu to what it is now. Then place the rest of your website in a website container. That way the fixed header will not overlap with the content of your website.
I'm new to webdevelopment and I am creating a responsive dropdown navigation bar with Jekyll and I followed this wonderful tutorial by Tania Rascia.
The problem is that there are no hrefs in Tanias tutorial so when you click on an item you don't get redirected to the specific page. Which of course is not a problem because you can just insert your own hrefs.
But I have a specific problem with the dropdown menus. Since all the dropdown menus open up when you click on them you also automatically click on the href which brings you to the specific page even though you just want to see the dropdown items. I know that I can just stop using an href and there wouldn't be a problem but I want the possibility to actually click on "Services" or "Portfolio" and get on a page that lists those items. Tania made this little Unicode arrow as an indicator that you can click the link to open up the dropdown (It's in the SCSS).
I made my own codepen where you can see my problem. If you click on the dropdown menu "Services" or "Portfolio" you will get redirected to wikipedia.org instead of seeing the dropdown items.
Services
Is there a possibility that I only open the href when I click on the word itself (For example "Services") and otherwise if I click the surrounding background or the little arrow I open the dropdown-menu? If it's not possible which is the common way to solve this problem?
The problem is the js display the dropdown & redirect, all you have to do is to add a html tag and redirect by it.
Here's your codepen with the needed modification https://codepen.io/anon/pen/NJrZwE
Js part
$('#wiki').on('click', () => {
document.location.href = "https://en.wikipedia.org";
});
Html part
<span id="wiki">Portfolio</span>
<ul class="nav-dropdown">
...
before popup:
after popup:
tell me how to do it, I have no clue, please!
This isn't popup.it is called mega menu. You can put links inside the menu and then do some styling.
So I have a website that uses enjin as a base and custom code on top of that. (not working as in hovering over the options doesn't make their drop downs appear as it does on other pages)
For some reason on my home page only the nav bar at the top doesn't work and I can't figure out why. Clicking on the "Enlist Today" button takes you to the application page where the navigation bar does work and it's confusing the life out of me.
Any help?
Website in question: http://www.142airbornedivision.com/
I think the problem is javascript:; if you omit it your page works fine.
<a href="javascript:;" target="_self">
If you wrote href for make a tag valid, instead of a tag you can use button because you created your navigation bar with divs
on this site:
http://www.dogslife.org.il/
when passing the focus with the TAB button when it gets to the menu area and go threw the button the menu dosn't open.
any suggestions on how to make itopen like it dose here (same theme):
http://www.magic-glass.co.il/
Add :focus to your CSS where you use :hover, that will trigger it when it's focused with tab