Community Forums › Forums › Archived Forums › General Discussion › Page is shaking when I click on nav menu
Tagged: page shaking
- This topic has 7 replies, 2 voices, and was last updated 8 years, 3 months ago by pym_74.
-
AuthorPosts
-
December 23, 2015 at 5:04 pm #174677pym_74Member
Hello, I’m genesis beginner, and I’m working on my second web site.
here http://www.inspirations-quotidiennes.comwhen I clic on my navigation menu, my page is shaking.
History of what I have done in function.php:
- I put the navigation menu on the top.
- I create a widget on the top, put a full slider with « cyclone ».
- remove the entry titleAnd in my CSS.
- create a custom.css. change css for nav. (maybe is here the problem)…When I try to remove the slider or the nav menu, it is still shaking.
Thanks to help me,
December 24, 2015 at 12:42 am #174698TomParticipantI don't see this in your menu (Chrome, Firefox, OS X).
This output in the menu HTML is odd; are you using a custom menu/enhancement of some kind?
<ul id="menu-primary_menu" class="menu genesis-nav-menu menu-primary js-superfish sf-js-enabled sf-arrows" style="touch-action: pan-y;">
I also don't see the slider (although the JS code is loaded...) Is it on an internal page?
If the problem(s) still exist, please add details:
Describe "shaking" more clearly.
What browser(s), OS?
What happens when plugins are disabled?
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]December 24, 2015 at 3:44 am #174705pym_74MemberHello, thanks for your help.
my goal is to code more cleanlyI put here a video to show the problem.
This output in the menu HTML is odd; are you using a custom menu/enhancement of some kind?
I create the menu with the WordPress backoffice, and change the css,
For the navigation menu, I target « a », maybe it could be the problem ?
/*link a*/ .nav-primary .genesis-nav-menu a { color: #379ea2; text-decoration:none; border: 1px solid #379ea2; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px border-radius: 10px; margin: 5px 15px 5px 10px; height:27px; width:200px; padding:2px; text-align:center; }
I also don’t see the slider (although the JS code is loaded…) Is it on an internal page?
I put this code in my function php:
//* Register before header widget area genesis_register_sidebar( array( 'id' => 'home-top', 'name' => __( 'Home Top', 'genesis-sample' ), 'description' => __( 'Le widget est placé en haut', 'genesis-sample' ), ) ); add_action( 'genesis_before_header', 'slider_top', 3 ); function slider_top() { genesis_widget_area( 'home-top', array( 'before' => '<div>', 'after' => '</div>', ) ); }
and I used the plugin Cyclone Slider 2 , and drop into my Widget « home-top »
What browser(s), OS?
Safari and Chrome = shaking
Firefox = is not shaking
OS = El CapitanWhat happens when plugins are disabled?
Same problem
Merry Christmas Tom 🙂
December 24, 2015 at 3:29 pm #174769TomParticipantSome educated guesses ...
Menu: Your custom.css (with the menu detail) is loading after the main stylesheet. This adds an unnecessary file call (performance hit) and the styles are applied after the default menu styles from the main stylesheet. This produces the flash of changed styles. In particular,the font, size and alignment are visibly changed when the second styles are are applied. Instead of keeping these separate, replace the default styles in style.css. All of the custom.css file can be merged into style.css
Slider: I see the slider now -- you are using it for the (single) banner image. This introduces more performance problems: 8 unnecessary javascript files and 4 stylesheets are loaded. Of the 30 (!) JS and CSS files loaded, 12 are from the slider. The page begins to load, then the cylclone files load in a flash with the single image and push the content down in the page. Since you are displaying only the single banner image, it would be more efficient to eliminate the slider and display the banner as a background image, something like:
.cycloneslider { background: url('http://inspirations-quotidiennes.com/wp-content/uploads/2015/12/1400_x_300_bandeau.jpg') no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
(Since you would eliminate the slider, you should change the naming of the div/container for the background banner image.)
Perhaps make a backup and try these changes.
Joyeux Noël 🙂
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]December 26, 2015 at 6:34 am #174824pym_74MemberOk thanks,
I try it, it works for slide shaking.
but for the navigation menu, I had the problem again.I find the solution. it was the script from Typekit font. I put it in Genesis setting in the backoffice.
It starts at the end of the <HEAD>.I tried with Google Font and I had no problem..
So I will continu with Google Font. But I think if I have to use Typekit, I must insert it with a function at the beginning of the <HEAD>.Bye,
Have a good New Year's Eve
December 26, 2015 at 11:28 am #174836TomParticipanthttp://briangardner.com/typekit-fonts/
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]December 26, 2015 at 3:36 pm #174842pym_74Memberthanks
December 26, 2015 at 3:55 pm #174843pym_74Memberit works now.
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.