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.
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 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.
I need a wee bit of help with css formatting on my website. Please see the provided screenshot, which relates to http://www.zerogravpro.com/.
css problem http://zerogravpro.com/temp/zgp_formatting.jpg
Problem #1: My orange-background box in the Testimonial sections goes quite a bit lower than I want it. How do I force it to move up, directly beneath the word "Testimonials"?
Problem #2: See the nice "More" button with the green ball and arrow in it? When I tried to use the same exact style down in my Testimonials box, it shows up as just a boring link. I want it to look the same as the button. I'm guessing that the style only gets invoked when it has the right hierarchy, but how can I fix this without messing up any other styles?
I provided the link to my website, so you can view it in Firebug and see exactly what the styles are, etc. Thanks!!
The Box below Testimonials is so low because there are two <br>-Tags below this line:
<p class="dotline"></p>
Remove them and it will fit.
And for the more button, you should add the class more to this <p>-Tag (untested):
<div id="testimonial6" style="">
<p></p>
</div>
The styles describing the button-like more-element is applied to a paragraph with class="more". However, the paragraph also includes a lot more rules than just the button, so you should try to extract the CSS regarding the button in order to make it reusable.
When it comes to positioning of the lower link, if you want to place it near the header you really need to move it closer to the header in the DOM.
There's an empty p element with the class of 'more' right above the testimonial box. Remove it and the testimonial box will be pulled up. Give it an appropriate margin top, and it will look good.
As for the button, here's my attempt at it -> http://jsfiddle.net/joplomacedo/c3vqh/
I have several collapsible blocks (divs) in my page with listviews inside them. The lists are pretty long (about 100-200 elements each.) When I un-collapse a block, scroll down a page, and click/tap one of the element in the list, the page scrolls to the top before sliding to the next page.
This behavior is somehow annoying and doesn't look good. I there any way to prevent this behavior?
If you have any additional question about my post, don't hesitate to ask me.
Thanks in advance.
If you use a link with "#" as href, it will jump up to the top of the page, however if you add "return false;" after the exectution of your code, it won't jump up. Example:
<script>
function test(){
alert('It works!'); // Just a simple function
}
</script>
<!-- Div to make the page scrollable -->
<div style="margin-top:1000px;height:1px;width:1px;"></div>
Yay
<!-- Triggering the test function and not jumping up to the top -->
I'm not sure if this is what you were thinking about though.