Anzahl der Beiträge: 22 Karma: 140 Beigetreten: 14.09.2017 Herkunft: 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.
Anzahl der Beiträge: 22 Karma: 140 Beigetreten: 14.09.2017 Herkunft: 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.
Anzahl der Beiträge: 22 Karma: 140 Beigetreten: 14.09.2017 Herkunft: Australia Yes tht exactly what I wanted. How to do it?
Anzahl der Beiträge: 22 Karma: 140 Beigetreten: 14.09.2017 Herkunft: 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?
MVP
Zertifizierter Entwickler
Anzahl der Beiträge: 766 Karma: 16050 Beigetreten: 24.12.2012 Herkunft: Vietnam You could have a try with 980.css
Anzahl der Beiträge: 22 Karma: 140 Beigetreten: 14.09.2017 Herkunft: 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; }