Site logo

[Resolved] Something making my website too wide

Home Forums Support [Resolved] Something making my website too wide

Home Forums Support Something making my website too wide

  • This topic has 3 replies, 2 voices, and was last updated 6 years ago by David.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1295313
    Matt

    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;
    }
    #1295369
    David
    Staff
    Customer Support

    Hi there,

    this CSS you added is causing the overflow:

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

    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.

    #1296023
    David
    Staff
    Customer Support

    You’re welcome

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.