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.
Related
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">
...
My site is [manayunkfarm.org] (sorry, can't post more than 1 link), My issue is that if I add more than 4 pages to my menu navigation, the navigation "hamburger" icon slides into white space on all pages with a shorter header image. (Click around the site and use the drop down navigation and you should get an idea of what I'm talking about.
I've mocked up what I'd like for it to look like,
mockup of possible new navigation
I figure it should be fairly easy to adjust the with of each navigation box in half, then create 4 more boxes, doubling the number of pages I can link to, in the same amount of space. Does anyone know where I would have to go in my wordpress editor to edit this and how?
Thanks
Well, for starters, opening effect and the stacking of the menu items are being handled by some jquery/javascript somewhere.
What you can do is use String Locator to locate which part of the code is responsible for changing the css of the #nav element. Then, change the code according to your preference. But, if you are not used to scripting then this will be tough.
The way out, which is my suggestion is that, change the color of the menu button.
Change it from white to the pink color being used for the menu link hover : #DBBFBE
If you want to go ahead with thi suggestion then:
Go to Appearance -> Editor. Generally, the editor should open style.css which is the default stylesheet of your theme.
Search for : #nav-toggle
Change the color attribute to #DBBFBE from whatever it is, I think its #ffffff;
Thanks.
I have a menu made from Wordpress that serves as my site's navigation. Every main item in this menu is a Page Type (redirects to other existing pages) with one of them having submenus that are custom links.
These custom links' URLs are div IDs from the its parent page. This is how it's structured.
About Us
Who we are
What we do
How we do
So the submenus URLs are #who-we-are, #what-we-do, and #how-we-do which are sections from the About Us page. Now my problem is that when I am in the About Us page, the submenus links works properly. It scrolls up/down to the section it should. But when I am in another page (let's say Homepage), it doesn't redirect to it as it can't find any section in the page with that div.
Any ideas on what I should put on the URLs instead? Thanks in advance.
To get it to work, you have to attach the id tags to the url (otherwise it is treated as a relative link).
Example:
A main page: http://yourdomain.com/page1
Section URL: http://yourdomain.com/page1#who-we-are
Suppose your about us page url is "www.yoursite.com/about-us".
Then to jump directly into a section of this page from external page you need to put anchor tag like this
<a href='http://www.yoursite.com/about-us#who-we-are'/>
so you should give url "http://www.yoursite.com/about-us#who-we-are" for your custom link not only "#who-we-are".
click link and see address bar
Wordpress submenu link to a section of page
For this you have to attach the ids with the links of pages from which you want to get redirect to particular section.
Example: Let say your home page be http://www.yourdomain.com/
Now pass the id with this as : http://www.yourdomain.com/about-us/#who-we-are
http://www.yourdomain.com/about-us/#what-we-do
These should be the ids of the div's on about-us page.
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'm probably not explaining this very well and I know there is a css property that handles this, I just cant remember its name. I have a menu and I want currently selected link that corresponds to the page being viewed be styled in a way that shows the user what page he is on.
Thanks
You can do this by editing the HTML of each page and adding a class to the relevant link. For example, if you are on the index.html page, your markup might look something like this:
Home
News
About Us
But if you were on the news.html page, it would look something like this:
Home
News
About Us
Notice how the class is only on the current page. You then style current however you see fit in your CSS file like so:
.current {
...
}