I have a fixed header in my website, when i try scrolling to a section with anchor links (href="#id_of_the_section") in my main page (where the section actually exists) everythng works fine using :
<style>
#documents, #team {
scroll-margin-top: 110px;
}
</style>
but when i try to go to that section from an external page not the main page as mywebsite.com/#id_of_the_section there is a problem.
The position where the scroll stops is not the same as when i click the anchor link in the main page
Related
I have a WordPress site where I added banner and sidebar filter option. But the banner shows as a conflict with filter option. If I added margin-top:300px then it goes down but this change applies to every page. I want to change this for the specific page only because I don't have banner on every page.
My site: http://motor.racedrivenonly.com/shop
Header image below:
There are classes added to the body tag in WordPress. Try to determine the proper body class ad you'll be able to add the margin based on a particular page template or type of page.
Try something like this:
.post-type-archive-product .blog-sb-widgets {
margin-top: 300px;
}
I am using gohugo-amp theme in a hugo app. In the header, I have a banner I want to dismiss onclick and have the dismissed state stored.
I have tried <a class="page-banner__close" on="tap:page-banner.hide">X</a> however the banner returns when the page is refreshed.
I have also tried using <amp-user-notification> tag. But <amp-user-notification> fixes the banner in the footer.
Is there a way to put a dismissible banner in the header and have that dismissed state stored so it does not return upon refresh??
You can style the amp-user-notifcation component to be placed at the top by adding this to your CSS:
amp-user-notification {
top: 0;
bottom: inherit;
}
So, I have a strange error with my CSS dropdown menu.
The website I'm designing has a standard index.html as the homepage which contains two main parts:
menu header at the top.
iframe in the middle where all selected pages are loaded.
The user hovers over one of the four menu categories at the top, a dropdown then appears with all the sub-options and when clicked it will load that page into the frame.
The problem I have, and this is ONLY in Chrome as Firefox & IE work fine, if the user refreshes the page or presses F5, when hovering over one of the menu categories all the sub-options have disappeared. Yet, the strange thing is that the links are still active so even though you cannot see any writing if the user clicks in the area where it should be, the page still loads into the frame.
This has only happened since I changed the homepage to use an iframe instead of just opening the page directly, as the menu content opens over the top of the frame. The CSS that covers these menus is shown below:
.menu-head-td, .menu-item {
transition: background-color 0.25s;
}
.menu-head-td:hover {
background-color:#37465D;
color:#FFFFFF;
cursor:pointer;
}
.menu {
cursor:pointer;
height:100%;
vertical-align:bottom;
}
.menu-content {
display: none;
position: absolute;
background-color:#37465D;
width:100%;
z-index: 10;
opacity:0.9;
left:0px;
top:93px;
}
.menu-item:hover {
background-color:#3466B1;
}
.menu:hover .menu-content {
display: block;
color: #FFFFFF;
}
The menus are all made up of simple and tags, no javascript or anything like that. I should mention that if the user clicks the address bar and just presses enter, it seems to reload the homepage again and the menus are all normal again. Strange hey?!
So I finally found an answer, a user on another site suggested moving around the order in which the browser detects the font files listed in the CSS file.
Originally the *.ttf file was listed above the *.woff file, I rearranged them so that the *.woff file is detected first and it works perfectly. Perhaps Chrome struggles with TTF files.
I have a named anchor situation that is working in IE but for some reason is not working in Firefox or Chrome. This set of pages is loaded within a Blogger frameset but hosted externally so I can control everything with the page's coding.
The link to the page where the issue resides is here:
http://www.gmvemsc.org/p/vdb-index.html
If you click the first link in the page titled "Main Compartment", the issue is obvious when you click on the third photo down with the tan medication boxes. Here is the code for the link:
<img src="images/pouchmain2.JPG" alt="Main Compartment Contents" width="500" height="254">
The anchor that I have just inside the body tag of the "Epinepherine" page is this:
<a id="pagetop"></a>
If you click on the photo link in IE you are taken to the top of the Epinepherine page where the named anchor resides. If you click on the photo link in Firefox or Chrome the Epinepherine page loads but the frameset stays scrolled about halfway down the page.
Is there a better way to load each page with the browser pointed to the top of the content that resides within this frame?
The problem is that the #pagetop anchor is in another frame. It is scrolled to the top, in its own frame, but the parent frame stays in scroll position.
You should try something like this:
<!-- this goes to the <head> of the <iframe> -->
<script>
// give an ID to the link, so you can do this:
document.getElementById("someID").addEventListener("click", function(e)
{
// stop the link from opening (for now)
e.preventDefault();
// scroll to the top of the page
window.scrollTo(0, 0);
// manually open the link
window.location = e.target.href;
});
</script>
Tell me if it's working!
Basically, I am trying to shift text down, in the head I am using the CSS:
<style>
.movedown {
position: relative;
margin-top: 20em;
}
</style>
And the text I want moved down has the code:
<div class="movedown">......</div>
The first page I tried this on, it worked, but on the second one it's doing nothing.
Also, the opening <style> tag is not turning blue in notepad++ on the broken page, if that is something to do with it?
Fixed it!
What I did was move the code that was in the head into the top of the body.
I don't know why it didn't work in the head but now it all works fine.