Total Posts:
22
Karma:
140
Joined:
9/14/2017
Location:
Australia
This is my first post and I am developing my own NOP website as I cant afford paying thousands of dollars and also I am from a NON IT background, I am an Engineer and my IT knwledge is limted. Some important bits of information before I post my 1st ever question: - nopCommerce version 3.9.0 - Installed nopCommerce on a remote host - SmarterASP.net My question: my website is www.instrumart.com.au: On the top header menu I have subheaders, I have quite a lot subheaders and they go out of the page when I scroll the mouse on them. As these subheaders are vertically alligned they go out of the page, is there a way to have these subheaders in horizontal orientation so that they all fit in the page and we dont have to scroll down. I hope my question is clear. Please visit the website and go on Lab consumables and then go in Instrument model and you will see my problem.
Total Posts:
22
Karma:
140
Joined:
9/14/2017
Location:
Australia
Is tht the scroll bar, I don't see it. Tht will work if there is no way to spread out the sub menu list horizontally.
Total Posts:
22
Karma:
140
Joined:
9/14/2017
Location:
Australia
Yes tht exactly what I wanted. How to do it?
Total Posts:
22
Karma:
140
Joined:
9/14/2017
Location:
Australia
Hi, thanks for your response. Can you please advice which file do I have to edit to make these changes. Is it the 480.css or 480.rtl.css or 768.css or 980.css?
Total Posts:
766
Karma:
16050
Joined:
12/24/2012
Location:
Vietnam
You could have a try with 980.css
Total Posts:
22
Karma:
140
Joined:
9/14/2017
Location:
Australia
Hi, I tried editing the code of 980.css but nothing worked. Maybe I am not inserting the code at the right place in 980.css file. Below is the partial copy paste of the entire code, can you please advise where to edit the code to get the result. @media all and (min-width: 1001px) { /* GLOBAL + HOME PAGE */ .form-fields { margin: 0; } .inputs { text-align: left; } .inputs label { display: inline-block; width: 166px; margin: 0 10px 0 0; text-align: right; } .center-1 .inputs label{ width:304px; } .master-wrapper-content { width: auto; } .master-column-wrapper { width: 980px; margin: auto; } .home .master-column-wrapper { width: auto; } .page, .home .page { text-align: left; } .page-title { overflow: hidden; } .page-title h1 { float: left; } .link-rss { display: block; float: right; margin: 3px 0 0; } .home .topic-block { width: 980px; text-align: justify; } .home-page-polls { width: 1000px; } /* HEADER */ .header { display: block; position: relative; z-index: 1002; width: 980px; margin: 0 auto; padding: 12px 0; text-align: left; } .header:after { content: ""; display: block; clear: both; } .header-links-wrapper { margin: 0; } .header-links-wrapper:after { content: ""; display: block; clear: both; } .header-links { float: left; padding: 0; } .header-links li { margin: 0 15px 0 0; } .header-links a:hover { color: #c03; } .flyout-cart { display: none; position: absolute; top: 32px; right: 0; z-index: 99999; width: 300px; border-width: 5px 1px 1px; border-style: solid; border-color: #333 #ccc #ccc; box-shadow: 0 1px 2px rgba(0,0,0,0.15); background: #fff; } #topcartlink:hover .flyout-cart { display: block; } .mini-shopping-cart { padding: 10px; font-size: 11px; } .mini-shopping-cart * { line-height: normal !important; } .mini-shopping-cart a { padding: 0; } .mini-shopping-cart a:hover { text-decoration: underline; } .mini-shopping-cart .count { border-bottom: 1px dotted #c03; padding: 10px 0; } .mini-shopping-cart .count a { padding: 0; font-weight: bold; color: #c03; } .mini-shopping-cart div.items { margin: 0 0 10px; } .mini-shopping-cart .item { border-bottom: 1px dotted #999; overflow: hidden; padding: 10px 0; } .mini-shopping-cart .picture { float: left; width: 50px; text-align: center; } .mini-shopping-cart .picture a { display: block; position: relative; overflow: hidden; } .mini-shopping-cart .picture a:before { content: " "; display: block; padding-top: 100%; } .mini-shopping-cart .picture img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: 100%; } .mini-shopping-cart .picture + .product { margin: 0 0 0 60px; } .mini-shopping-cart .name { margin: 0 0 5px; font-size: 12px; font-weight: bold; } .mini-shopping-cart .name a { color: #333; } .mini-shopping-cart .totals { margin: 0 0 10px; font-size: 12px; text-align: right; } .mini-shopping-cart .totals strong { color: #c03; } .mini-shopping-cart .buttons { margin: 0 0 5px; text-align: right; } .mini-shopping-cart input[type="button"] { display: inline-block; border: none; background-color: #c03; padding: 8px 16px; color: #fff; } .mini-shopping-cart input[type="button"]:hover { opacity: 0.8; } .search-box.store-search-box { float: right; clear: right; } .search-box form { border: none; } .search-box.store-search-box input.search-box-text { width: 250px !important; height: 32px; font-style: normal; } .search-box.store-search-box .search-box-button { height: 32px; } .ui-autocomplete.ui-menu.ui-widget.ui-widget-content { width: 286px !important; } .header-selectors-wrapper { float: right; background: none; padding: 0; } .header-selectors-wrapper > div { float: left; margin: 0 10px 0 0; } .header-selectors-wrapper > div:last-child { margin-right: 0; } .header-selectors-wrapper select { min-width: 100px; max-width: 120px; border: none; background-color: #eee; font-size: 12px; color: #666; } /* SUBHEADER - LOGO & HEADER MENU */ .responsive-nav-wrapper-parent, .justAFixingDivBefore, .overlayOffCanvas, .menu-title, .close-menu, .header-menu .back-button, .plus-button { display: none !important; } .subheader-wrapper { margin: 0 0 30px; background-color: #333; text-align: center; font-size: 0; } .logo-wrapper { display: inline-block; width: 230px; margin: 0 10px 0 0; background: none; padding: 10px 0; vertical-align: left; } .header-logo { padding: 0; text-align: left; } .header-logo img { max-width: 230px; } .headerMenuParent { display: inline-block; width:1001px; margin: 0; padding: 10px 0; vertical-align: top; } .header-menu { position:relative; z-index:1001; } .header-menu > ul { display: block; text-align: left; font-size: 0; color: #fff; } .header-menu > ul > li { display: inline-block; padding: 5px 18px; vertical-align: middle; } .header-menu > ul > li > a, .header-menu > ul > li > span { font: normal 14px 'eurostile'; cursor: pointer; } .header-menu > ul > li > a:first-letter, .header-menu > ul > li > span:first-letter { font-size: 18px; } .header-menu > ul > li > a:hover { text-shadow: 0 0 5px #fff; } .header-menu .sublist-wrap { display: none; position: absolute; z-index: 1001; min-width: 180px; margin: 5px 0 0; border-width: 4px 0; border-style: solid; border-color: #333; box-shadow: 0 0 2px rgba(0,0,0,0.3); background-color: #fff; } .header-menu .sublist-wrap.active { display: block !important; } .header-menu .sublist li { position: relative; border-bottom: 1px dotted #ccc; } .header-menu .sublist li:last-child { border-bottom: none; } .header-menu .sublist .back-button { display: none; } .header-menu .sublist li a { display: block; padding: 10px; font: normal 12px 'eurostile'; color: #333; } .header-menu .sublist li > a:hover { background-color: #c03; color: #fff; } .header-menu .sublist-wrap .sublist-wrap { top: -5px; left: 100%; border-top-width: 0; } /* QUICK TABS */ .home-page .ui-tabs { width: 980px; } .home-page .ui-tabs .ui-tabs-nav li { display: inline-block; } /*FOOTER*/ .footer > div { width: 100%; } .footer-upper { position: relative; } .footer-upper:before { content: ""; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 60px; background-color: #333; } .footer-upper .center { width: 1000px; margin-left: auto; margin-right: auto; } .footer-block { width: 23%; margin-bottom: 0; } .footer-block:nth-of-type(3n+1) { clear: none; } .footer-block .title { margin-bottom: 25px; text-align: left; cursor: default; } .footer-block ul { border-right: 1px solid #ccc; margin-bottom: 0; padding: 0; } .footer-block li { overflow: hidden; font-size: 13px; } .footer-block li a { padding-right: 10px; } .footer-block li:hover a { color: #c03; } .footer-block li:hover a:before { background-color: #c03; border-color: #c03; } .footer-block.recently-viewed a:hover { } .footer-block .news-items { margin: 0; padding: 0; } .news-list-homepage .news-title { margin-bottom: 3px; padding: 0; color: #111; } .news-list-homepage .news-title:hover { color: #c03; } .news-list-homepage .view-all { display: none; } .footer-middle { margin: 0; background-color: #ccc; padding: 15px 0; } .footer-middle .center { position: relative; width: 1000px; min-height: 60px; margin: auto; } .social-sharing { position: absolute; top: 50%; left: 0; margin: -16px 0 0; } .social-sharing li { border: none; margin: 0 10px 0 0; } .social-sharing .twitter:hover { background-position: 0 bottom; } .social-sharing .facebook:hover { background-position: -32px bottom; } .social-sharing .youtube:hover { background-position: -64px bottom; } .social-sharing .pinterest:hover { background-position: -128px bottom; } .social-sharing .google:hover { background-position: -96px bottom; } .social-sharing .rss:hover { background-position: -192px bottom; } .social-sharing .vimeo:hover { background-position: -160px bottom; } .social-sharing .instagram:hover { background-color: #f2f2f2; } .newsletter { width: 286px; margin: 0 auto; border: none; background: none; padding: 0; } .newsletter-email { border: none; background: #fff; } .newsletter-email input[type="text"] { width: 250px; } .newsletter .options { background: #cccccc none repeat scroll 0 0; clear: both; } .accepted-payment-methods { position: absolute; top: 50%; right: 0; margin: -18px 0 0; } .accepted-payment-methods li { border: none; margin: 0 0 0 10px; } .footer-lower .center { position: relative; width: 1000px; min-height: 24px; margin: auto; overflow: hidden; text-align: left; } .footer-lower .center > div { margin: 0; line-height: 24px; } .footer-disclaimer { float: left; } .footer-powered-by { float: right; } .footer-designed-by { float: right; margin: 0 10px 0 0 !important; } .footer-store-theme { position: absolute; top: 50%; left: 50%; margin: -12px 0 0 -75px !important; } .footer-store-theme select { width: 150px; height: 24px; padding: 3px; }