I’m an HTML guy and Sitepointer from way back, but have been out of circulation for a couple of years. Jumping back in and trying to get up to speed with the latest, so I used a responsive HTML template but have a few things beyond my skill.
If you are talking about the blue border on hover then that is created with this rule here:
/* style css line 935 */
menu ul li:hover a, .menu ul li a.active {
color: #005dab;
border-bottom: 2px solid #005dab;
}
The spacing is created by padding bottom on the ‘a’ element and if you want the border level with the line that goes across the screen then try setting it to about 14px.
e.g.
/* style css line 940 */
.menu ul li a {
padding: 34px 20px 14px;
}
PaulOB - thanks very very much for the detailed help! When I was a member of the forum here years back it was always a source of helpful people and you have kept the tradition alive.
Half the fixes are working for me, but half aren’t:
Nothing I do there changes anything. Even deleting the line has no effect. It must be overridden somewhere, but I can’t find it. Any ideas?
That’s a parallax section. As the page is scrolled, it reveals the background image. Something wrong there?
Are we talking about a specific validator?
Also, on an iPhone 6 in landscape, the page pulses up and down continuously about 10px. Ever seen anything like that?
At this time, in Firefox, the items below the menu ride under the menu at narrow widths. If you disable the items that I marked “why?” in the above CSS, the underflow stops. Don’t know if anything is adversely affected or not, so you need to try it out. Hopefully this will help with something and not break something else.
I commented out the lines you pointed out and no change. I also commented out line # 942 “padding: 50px 20px 49px;” and the underline on the menu is unchanged. Since I can’t affect the menu underline, I’m trying to find what is overriding it, but don’t see anything, even going through the menu section around line #1104.
So changing the gap between the menu underline and the menu text is the one fix I need and the iPhone 6 in landscape having the page pulse up and down continuously about 10px is the other.
Yes that is caused by the webkit ‘bugfix’ you have in base.css.
body{ -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }
There are no comments in the code as to what bug that was supposed to be fixing and as your page is quite large it will be impossible to tell. That’s why you must document any bugfixes in the code otherwise no one wil know why they are there.
Suffice to say that bugfix is killing the iphone in landscape because you also have an animation on all ‘a’ elements and combined with the infinite bugfix on the body element you go into an infinite loop.
The only bug I know that the ‘bugfix’ attempts to fix is the adjacent sibling bug in -webkit but that is long since fixed.
I would remove the section of code from the body entirely unless you know explicitly why it was added. The code also sends the cpu into overdrive as it is working all the time. If indeed the code is needed for some other animation then the only other fix is to remove the animation you placed on all ‘a’ elements here:
/* Smooth hover effects */
a,
a i,
button,
input[type="submit"] {
-webkit-transition: all .2s;
-moz-transition: all .2s;
-ms-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
}
Again that is another bad move as it is a global rule and affects all anchors including those that don’t need transitions and therefore you make the browsers works ten times as hard as it should. Use classes and apply transitions only when needed. Remember a browser only has so much power so don’t use it all up before you start
I’ve been trying to understand and sort this out, but again, my skills are a few years old and webkit and responsive stuff is entirely new to me. This was all part of the template I’ve been working off of, so debugging new stuff is hard for me.
I see the code in the CSS. What code in the body? Can you be more explicit?
