Site logo

Archived topic

Something making my website too wide

3 replies · Started by Matt on May 21, 2020

Viewing posts 1–4 of 4

Not sure which part of my code is making my website over 100% in width size? I'm trying to get rid of the bottom horizontal scroll bar cause something's making my website too wide.
https://imgur.com/a/B1I9S3R


/*simple mega menu*/
/*desktop mega menu */
@media (min-width: 769px) {
nav .main-nav .mega-menu {
position: static;
    }
/* makes cart images bigger */
.woocommerce-cart table.cart img, 
.woocommerce-checkout table.cart img {
    width: 150px !important;
}
	
.cart-contents>span.number-of-items {
    display: inline-block;
    top: -20px;
}

.cart-contents>span:not(:empty) {
    margin-left: -5px;
}	
/* makes yellow shadow box around menu 
nav {
box-shadow: 1px 1px 1px 1px #ffff00 !important;
	}
*/
nav .main-nav .mega-menu > ul {
position: absolute;
width: 100%;
left: 0 !important;
box-shadow: 1px 0px 4px 1px #ffff00 !important;
    }

nav .main-nav .mega-menu > ul > li > a {
font-weight: bold;
    }

nav .main-nav .mega-menu>ul>li {
        display: inline-block;
        width: 25%;
        vertical-align: top;
    }

    nav .main-nav .mega-menu.mega-menu-col-2>ul>li {
        width: 50%;
    }

    nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
        width: 33.3333%;
    }

    nav .main-nav .mega-menu.mega-menu-col-5>ul>li {
        width: 20%;
    }

    nav .main-nav .mega-menu > ul > li:hover > a,
    nav .main-nav .mega-menu > ul > li:focus > a,
    nav .main-nav .mega-menu > ul > li[class*="current-"] > a,
    nav .main-nav .mega-menu ul ul {
background-color: transparent !important;
color: inherit;
}
nav .main-nav .mega-menu ul .sub-menu {
position: static;
display: block;
opacity: 1;
visibility: visible;
width: 100%;
box-shadow: 0 0 0;
left: 0;
height: auto;
    }

nav .main-nav .mega-menu ul.toggled-on .sub-menu {
	pointer-events: auto;
    }

nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
	        display: none;
    }
	
.main-navigation ul li:hover > a {
  background-image: linear-gradient(#00540f, black) !important;  
	color: #ffff00 !important;
}
div.inside-navigation,
.main-nav > ul > li > ul.sub-menu {
    background-image: linear-gradient(#00540f, black) !important;
}
.main-navigation .site-logo {
position: absolute !important;
margin-left: 10px !important;  left: 0;
top: 0;
}
.main-navigation .site-logo img {
    height: 175px !important;
	margin-top: -15px !important;
}

Hi there,

this CSS you added is causing the overflow:

div.inside-navigation {
    margin-right: -70px;
}

Thanks I am sure I was using that for moving the navigation to the right but I forgot that there is a button for aligning navigation right.

You're welcome

This archived topic is closed to new replies.