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
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">
...
Here's the website I'm working on: http://104.193.173.104/modx/
The top navigation has 2nd and 3rd levels that are generated by Wayfinder in ModX. As far as I can tell from the page source and chrome inspector, they are generating properly and have the appropriate CSS classes. When I click one of the nav links, the inspector shows the li class change to "dropdown open" and a ul class "dropdown-menu" appears. I can see the outline in inspector, but nothing is showing on the page.
I'm guessing this is a z-index problem in my CSS, but I'm not very familiar with how all of that works. Is anyone able to help me? Let me know what HTML/CSS you need me to include and I'll edit this post. Cheers!
note: My jQuery is called in the head of each page
Your navigation div (#main-navigation-container) has overflow:hidden. You'll need to figure out what you want to do there but that's why it's being "cropped" out.
Normally it works, using this example. http://www.computerhope.com/issues/ch000049.htm
But I am trying to do this in Shopify and so far no luck. I have a dropdown menu with headings that link to specific parts of a page. In the Shopify Nav links, I am using a "web address" option to add a link that looks like this. http://mysite.myshopify.com/pages/vollyball#anchor.
It links to that page but it does not slide down to the the specific area of the page that it's suppose to.
How can I do this?
Use this in link,
Title 4
This is for specific area of page.
<a name="title4">Title 4</a>
I might have done this the wrong way. I've made a navigation bar with 4 images that link to some other pages. The navigation bar is on every page as it should be. I can hover over the image to change the source, but I also want to change the source if I am on a specific page.
For example, when I click on 'shopping cart', my site navigates me out to that page and the navigation bar looks the exact same. I want the image that I clicked to change to a different image, only when I'm on that page. If I go to a different page, I want the image to return to it's original state. The user should be able to see all 4 images, and the 'shopping cart' one is the only one that looks different, implying that they are on the shopping cart page
Basically, I'm looking for something like what Twitter has done. (Image changes when you on 'Home' page and when you are on 'Connect' page).
I've tried the :active and the :focus class and those don't work for me. Maybe I need some Javascript? I'm honestly not sure. I've searched google up and down. I would appreciate any help, even if it is just new documentation that I can test.
Anything! Thanks :)
html:
<nav>
<ulstyle="list-style-type:none">
<li id="daily_sale" style="display:inline"></li>
<li id="my_account" style="display:inline"></li>
<li id="support" style="display:inline"></li>
<li id="shopping_cart" style="display:inline"></li>
</ul>
</nav>
What are your pages built with? WordPress? PHP? Static html pages?
Ideally, you would add a class to the nav bar item that you are currently on. For example, if you are on the Home page, add a class of "active" to your list item.
Then you can add CSS for the active class to change the background image.
You can use location.href property in javascript to detect the current page, and add some additional CSS class to corresponding menu item.