- 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)
-
AuthorPosts
-
May 21, 2020 at 6:52 am #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; }May 21, 2020 at 7:41 am #1295369David
StaffCustomer SupportHi there,
this CSS you added is causing the overflow:
div.inside-navigation { margin-right: -70px; }May 21, 2020 at 8:23 am #1295573Matt
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.
May 21, 2020 at 3:39 pm #1296023David
StaffCustomer SupportYou’re welcome
-
AuthorPosts
Viewing 4 posts - 1 through 4 (of 4 total)
- You must be logged in to reply to this topic.