Tito Tito - 1 month ago 6
CSS Question

my wordpress css stopped working overnight

hi guys I am having a massive issue with wordpress at the moment..

last night and this morning, my website was working fine. Until earlier on my css stopped working properly.

when you hover over some menu a nested under some li, a hover effect with a transition is supposed to happened. That stopped working... my owl carousel when the page load doesn't show up until the scroll function gets activated.

I am suspecting that its a problem with my cache, but i even tried using Stackpath CDN to solve that and it didn't change anything. I am truly lost as to what to do.

on the customize menu, the controls for the hover colors dont work for the menu links either

this is my website stylehercloset.co.uk

and this is my javascript file:

jQuery(document).ready(function(){

// owl caroussel
jQuery(".owl-carousel").owlCarousel({

items:1,
navRewind:true,
center:true,
autoplay:true,
autoplayTimeout:3000
});

/* end of owl caroussel */
// adobe typekit
try{
Typekit.load({ async: true });
}
catch(e){}

// end of typekit

jQuery(window).scroll(function(){

if(window.pageYOffset > 394){
jQuery("#access").css({"position":"fixed",
"z-index":"2",
"left":"0px",
"top":"0px",
"border":"0px",
"border-width":"1px",
"border-bottom-style":"solid",
"margin-top":"auto"

/*"padding-top":"2.5em" */});
}

if(window.pageYOffset < 394){

jQuery("#access").css({"position":"initial",
"padding":"0px",
"border-top":"1px",
"border-bottom":"1px",
"border-top-style":"solid",
"border-bottom-style":"solid",
"margin-top":"0.5em"
});
}

}); // end of scroll function


// code for the footer area

jQuery("#first,#second,#third,#fourth").addClass("col-xs col-sm-1 col-md-3 col-3");


jQuery("#footer-widget-area").addClass("row");


jQuery("#primary, #secondary").addClass("col-xs col-sm-3");

jQuery(".small-nav i").click(function(){
jQuery("div.menu").slideToggle("slow");

});
});


and this is the relevant css from my style.css:

#access .menu ul a:hover {
background-color: #40E0D0 !important; }


and this is from my functions.php file

function customizer_css(){

?>

<style type="text/css">

*h1 {
<?php echo get_theme_mod('h1_font'); ?>;
}

* h2 {
<?php echo get_theme_mod('h2_font'); ?>;
}

*h3 {
<?php echo get_theme_mod('h3_font'); ?>;
}

*h4 {
<?php echo get_theme_mod('h4_font'); ?>;
}

*h5 {
<?php echo get_theme_mod('h5_font'); ?>;
}

* p {
<?php echo get_theme_mod('p_font'); ?>;
}

*a {
<?php echo get_theme_mod('a_font'); ?>;
}

#site-title {
<?php echo get_theme_mod('title_position'); ?>
font-size:<?php echo get_theme_mod('title_size'); ?>em !important;
}

#primary a, #secondary a {
<?php echo get_theme_mod('widget_a_font'); ?>;
}

#small-menu, #access, #wrapper,#footer #colophon{
background-color:<?php echo get_theme_mod('website_colour') ?> !important;
}

#header-bg {
background-image: url('<?php echo get_header_image(); ?>');
background-color: <?php echo get_theme_mod('header_colour'); ?> ;
background-position: <?php echo get_theme_mod('header_bg_position_x_lg','0%'); ?>
<?php echo get_theme_mod('header_bg_position_y_lg','0%'); ?> !important;
}

#main a, #footer-widget-area a {
color: <?php echo get_theme_mod('link_colour'); ?> !important ;
}

.current_page_item a, #access .menu ul a:hover {
background-color: <?php echo get_theme_mod('hover_colour'); ?> !important ;
}

#access .el:hover {
color: <?php echo get_theme_mod('hover_colour'); ?> !important ;
}

h1#site-title a{
<?php echo get_theme_mod('title_font_style'); ?>;
}

@media screen and (max-width:767px) {

#header-bg {

background-position: <?php echo get_theme_mod('header_bg_position_x_xs','0%'); ?>
<?php echo get_theme_mod('header_bg_position_y_xs','0%'); ?> !important;

}

#site-title {
<?php echo get_theme_mod('title_position_xs'); ?>
font-size:<?php echo get_theme_mod('title_size_xs'); ?>em !important;
}


} /* end of mobile size */

@media screen and (min-width:768px) and (max-width:991px){

#header-bg {
background-position: <?php echo get_theme_mod('header_bg_position_x_sm','0%'); ?>
<?php echo get_theme_mod('header_bg_position_y_sm','0%'); ?> !important;
}

#site-title {
<?php echo get_theme_mod('title_position_sm'); ?>
font-size:<?php echo get_theme_mod('title_size_sm'); ?>em !important;
}

} /* end of small*/

@media screen and (min-width:992px) and (max-width:1199px){

#header-bg {
background-position: <?php echo get_theme_mod('header_bg_position_x_md','0%'); ?>
<?php echo get_theme_mod('header_bg_position_y_md','0%'); ?> !important;

}

#site-title {
<?php echo get_theme_mod('title_position_md'); ?>
font-size:<?php echo get_theme_mod('title_size_md'); ?>em !important;
}


} // end of medium
</style>

<?php
}


//add actions

add_action('wp_enqueue_scripts','style_n_scripts');

//theme customizer api
add_action( 'customize_register', 'customizer_api' );

//theme support

add_action('init', 'shc_theme_support');

// theme customizer css

add_action( 'wp_head', 'customizer_css');

Answer

Looks like it's a CSS issues/conflict. When you remove the float:left; on the element with id #access on line 386 of your stylesheet it gets fixed and your carousel appears.

Or add the class clearfix to the element with id #header.

Read more about clearfix

Comments