Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

[SOLVED] Page menu moves on hover


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Feb 27, 2013, 07:22 AM
cabdziner
 
17 posts · Feb 2011
ATA 3.7.10 - http://melissaleeper.wordpressproservices.com

This is a sandbox site I am building for a client. I have a custom widget area for the header content and have adjusted the menu (pages-right) so it is positioned with the bottom of the logo in the header.

Code:
div#menu1 {
background: transparent !important;
border: none !important;
margin:-80px 0 0 0;
}
Problem: the menu items move when you hover over them. I can't seem to find a fix.

I have been using ATA 3.5.3 for many years and this is the first time using this new version.

Any ideas would be greatly appreciated.
  #2  
Old Feb 27, 2013, 07:52 AM
juggledad's Avatar
juggledad
 
22,253 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
well would you like to walk thru how to figure this out?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Feb 27, 2013, 08:03 AM
cabdziner
 
17 posts · Feb 2011
yes please
  #4  
Old Feb 27, 2013, 08:18 AM
juggledad's Avatar
juggledad
 
22,253 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
ok, first fire up FireFox and make sure you have the FireBug extension installed
next go view the page then using the browsers 'view source' option, view the source, copy it save it to a text file with the extension 'html' and then open this file in your browser to see if you see the page.

come back once you have done that.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Feb 27, 2013, 08:34 AM
cabdziner
 
17 posts · Feb 2011
ok... ready
  #6  
Old Feb 27, 2013, 08:55 AM
juggledad's Avatar
juggledad
 
22,253 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Next edit the file and remove everything from just after the
HTML Code:
<title>Main  Melissa Leeper</title>
thru just before the <style for all the atahualpa styling
save and view the page

then remove everything from
HTML Code:
<tr id="bodyrow">
to the </tr> just before the last </table> on the site

What you are doing is reducing the code to a manageable size to isolate the issue.
save and view the page
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Feb 27, 2013, 08:59 AM
juggledad's Avatar
juggledad
 
22,253 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
next remove every thing from the end of the atahualpa css ie after the </style> thru just before the </head> statement
save and view the page.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Feb 27, 2013, 09:01 AM
juggledad's Avatar
juggledad
 
22,253 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
next remove the following
HTML Code:
<a href="http:www.linkedin.com" target="_blank"><img src="http://melissaleeper.wordpressproservices.com/wp-content/uploads/2013/02/LinkedIn-Active-45.png" class="alignnone" alt="linkedin"></a>&nbsp;

<a href="http:www.facebook.com" target="_blank"><img src="http://melissaleeper.wordpressproservices.com/wp-content/uploads/2013/02/Facebook-Active-45.png" class="alignnone" alt="facebook"></a>&nbsp;

<a href="http:www.pinterest.com" target="_blank"><img src="http://melissaleeper.wordpressproservices.com/wp-content/uploads/2013/02/Pinterest-Active-45.png" class="alignnone" alt="pinterest"></a>&nbsp;

<a href="http:www.twitter.com" target="_blank"><img src="http://melissaleeper.wordpressproservices.com/wp-content/uploads/2013/02/Twitter-Active-45.png" class="alignnone" alt="twitter"></a>&nbsp;

<a href="http:www.instagram.com" target="_blank"><img src="http://melissaleeper.wordpressproservices.com/wp-content/uploads/2013/02/instagram-45.png" class="alignnone" alt="instagram"></a>
save and view the page.

now tell me what you have and what happens when you hover over the menu items.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #9  
Old Feb 27, 2013, 09:35 AM
cabdziner
 
17 posts · Feb 2011
ok... got this done
  #10  
Old Feb 27, 2013, 09:52 AM
juggledad's Avatar
juggledad
 
22,253 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
now tell me what you have and what happens when you hover over the menu items.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old Feb 27, 2013, 10:04 AM
cabdziner
 
17 posts · Feb 2011
all I have is the menu and it still moves when I hover. The menu links have a dotted border (except for the current page) and the link border disappears when I hover over any of them.
  #12  
Old Feb 27, 2013, 11:16 AM
juggledad's Avatar
juggledad
 
22,253 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Quote:
The menu links have a dotted border (except for the current page) and the link border disappears when I hover over any of them.
this is the key! the border changes when you hover and a border takes up some room so it causes the shift.

now look at the same page with firefox and see what happens to the various elements when you hover. In the firebug 'style' tab there is a ':hover' check off so you can see what CSS is applied on a hover. Look at the various elements and shut some of them off to see what happens (clicking next to a css rule puts a red circle with a slash and shuts off the rule.)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Feb 27, 2013 at 01:35 PM.
  #13  
Old Feb 27, 2013, 12:10 PM
cabdziner
 
17 posts · Feb 2011
Thanks Juggledad... found the culprit. You're the best.
  #14  
Old Feb 27, 2013, 01:35 PM
juggledad's Avatar
juggledad
 
22,253 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Now you know how much time goes into find 'simple' answers
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] transparent page menu hover cway Page & Category Menu Bars 8 Apr 23, 2012 11:12 AM
[SOLVED] Sidebar moves on just one page pmac Sidebars & Widgets 2 Nov 12, 2011 09:59 AM
Category menu moves to the left when javascript is activated Harald Page & Category Menu Bars 1 Nov 4, 2010 04:31 AM
[SOLVED] Background color:hover not working for 'category' items in menu 1 (page menu akg Center area post/pages 4 Sep 27, 2010 08:08 AM
Page Menu Background & Hover Image how to do this... ssoszka Atahualpa 3 Wordpress theme 11 Feb 18, 2010 11:19 AM


All times are GMT -6. The time now is 03:31 AM.


Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.