On my site for some reason I keep getting a margin-top:-40px; style applied to my sticky-nav. This takes it off the screen when you scroll, and when you do return to the top lays it on-top of my header. I can not find out where this style is coming from. it is applied to the element, so I can't find it on a stylesheet. I am at a loss for where this is coming from.
https://www.popstops.com
magento 1.9.3.3
I had an extension overwritting Jquery causing this issue
Related
I am searching for a piece of html which I believe may be causing my site to be obstructed by random black boxes on every page.
I believe that footer is somehow duplicated and <footer></footer> may be the root cause but unsure where to locate it or if there's such a thing as article.php?
Example page: https://adsler.co.uk/events/
The problem is that your content entry has footers. It is not the page footer it is the entry footer that you are seeing. It might be weird to change if you are using a theme. There might be a setting to remove entry footers. But if that does not work you can go into your CSS and apply .entry-footer { display: none; }. This will remove the black box. I will attach a screenshot.
Hope this helps.
I would advise that you leave the footer in the article alone. Fix your problem by styling .site-footer instead of footer
The footer element existing in more than one place is semantically correct HTML5. It signals users and devices of all types that this is the footer of the current part of the site. Your black boxes are because you have styles applied to footer that should be applied to .site-footer instead. You can't predict that the html content created by some plugin wont include a footer element, but you can be fairly certain that it won't have a footer with the class .site-footer
The menu of the following website https://www.thedegreetracker.com/ has the following issue. The menu seems to be wider than the rest of the page. This is causing a horizontal scroll bar appear at the bottom of my browser's window. When one scrolls over (or maximizes the browser page on a very wide computer screen), it causes other parts of the page, such as the banner and the footer, to disappear when you scroll over.
By way of contrast, the following page does not have the same problem: https://www.thedegreetracker.com/about_us. This second page is how I want the first one to work in terms of the banner and footer resizing correctly, and no horizontal scroll.
As far as I can tell, the HTML and CSS code between the two pages is nearly identical. The differences I have found don't seem to make a difference. I have spent hours trying to figure out what is causing this issue and I am now asking for fresh eyes. I'm using Bootstrap 3 and Laravel, for what it's worth.
I'm hoping this is an easy fix that I'm just missing. You'll probably have more luck using Chrome Dev Tools on the actual web pages to figure this one out, but below is the HTML for both pages. As far as I can tell, the CSS is exactly the same for both pages.
Here's the code from the broken page with the wide menu and horizontal scrolling
view-source:https://www.thedegreetracker.com/login
Here's the code from the page with the menu, banner and footer that work correctly
view-source:https://www.thedegreetracker.com/about_us
The problem is the within the form, not the menu. You have wrongly used the container class (reserved by Bootstrap for setting width of page) inside your form.
Also, your form has a class of .container but you're overwriting the max-width property. This will likely cause responsiveness problems. Try not to touch width, max-width and min-width on classes that a framework uses for setting the width of content and layout, in general. If you must, use an inner-container.
Getting back to your problem, you should have probably used no class at all for your containers inside the form. As a rule of thumb, try to use class names that do not collide with the class names of your framework.
To fix your issue, either remove container from inside your form or, as a general patch for this type of error, add this CSS:
.container .container {
width: initial;
}
This website is built with a back-end web to print service called Zoo Printing. The client I work for does not like the original design so I've being hired to re-design it with the development team that handles the back-end. I replaced their old navigation menu with the current CSS mega navigation that's on the site. Their developers decided to keep their code on the website for back up just in case they need to roll-back to the old navigation. The issue is even though their code is commented out, it creates a huge white space between my CSS slideshow and footer. Their developers are blaming my code and will not tell me where the problem is coming from. Can one of you inspect my code and tell me what would be causing this? I've tried simply removing the white space with CSS by absolute positioning it off the page, but when i do this the footer changes on every page except the home and it also removes my CSS slide show. I can not figure out how to remove this white space without messing with my layout.
The website is Advanced Litho
body > div:nth-child(4)
This is the div that's creating the issues with the layout. So far I've tried to absolute position it off the page with no luck.
There is a div at the bottom that is making the space huge, it is right above the commented out content and right below the div with id=content. All of these boxes have a visibility of hidden which does not delete them from your page, it simply makes them invisible. All you need to do is find that div, and insert an inline style.
<div style="display: none;">(old nav)</div>
Essentially, they just hid what they were supposed to remove.
There are unordered lists inside <div class="nav_child"></div>
If you can remove them, it is best to do so, otherwise you can hide them with css and get rid of the white space:
.nav_child ul {
display: none;
}
I'm experiencing an extremely weird behavior when using Twitter Bootstrap's affix plugin, fixed navbar, and anchor links together. I'm going to attempt to explain my problem but it's kind of difficult to put into words, so please forgive me if I'm not the clearest.
I have a navbar-fixed-top at the top of my page. Under that I have a .container div. Inside there I have two div.spans (span4 and span8). Inside span4 is a div.well that has the affix-top class applied to it (so it gets a fixed position and "sticks" where it's at). Inside my span8 I have a bunch of content.
Inside the well div there is a nav-list. This list gets populated with li/a elements based on items in the span8 (I have a little script that does this). The links are anchors, so they point to elements on the page (#myId, #myIdTwo, etc). All this works wonderfully. My list is there, the links are clickable, they take me to my elements. Great.
However, not great. Sometimes, when I click one of the links, I go to my anchor in the span8 but the page doesn't seem to refresh properly. I sometimes see strange white "boxes". Or the content inside the span will show partly above the fixed nav-header. Sometimes half of the nav-list disappears.. but then comes back (sort-of) if I move my mouse around it. Like you used to see in some old Windows applications that were getting bogged down.
You can see for yourself here: http://jaylach.github.com/lutra. You may need to click some of the nav links a few times before you see the issue.
I've been struggling with this all day and I cannot, for the life of me, figure it out. I've taken out the affixes, I've taken out the fixed top navbar, I've taken out my z-index. I just can't seem to figure it out.
Does anyone, anywhere, have any clue as to what could be causing this? I would really appreciate any advice you guys could give.
Many thanks in advance!!
This is a WebKit bug.
add -webkit-transform: scale3d(1,1,1); to both .navbar-fixed-top and .affix
both styles are defined in bootstrap.min.css. So override these 2 styles in your main.css as:
.affix,.navbar-fixed-top {
-webkit-transform: scale3d(1,1,1);
}
My page, it keeps on getting different menu width when i zoom in and out. It is fine in IE, and no one else. I did not spot any fixed positioning, this seems to be using relative position.
have tried playing and disabling all CSS property to my menu bar through google chrome inspect element.
turn this from none to auto: " -webkit-text-size-adjust: auto "
Tried to use em ex px for my font-szie and padding. I am juiced out of ideas, save me internet!!!
www.magentek.com
Try zooming out, you will find press room gets pushed down. I got this SimplyBiz theme from wpcrunchy. It seems even the paid version have this problem too. The CSS and html is way too large to post, too much bloated codes, i think is sufficient to just use chrome inspect element.
I took a look at the site, and my opinion is that the css and js that make up the menu functionality are creating a 6th menu element. That would explain why an extra little tab is hanging off the end there. Since it doesn't have any content, the browsers are all handling the whitespace a little differently.
Did you by any chance modify the menu to take it from 6 elements to 5?