/*=== 2025 / phun =================================================================================== === This is the "custom.css" file for site "mettmi2026.ch" using HeliX Ultimate 2.x.x Template === ===================================================================================================*/ /*================================================================================================== === Local Font Definitions =========================================================== START === ==================================================================================================*/ /*================================================================================================== === Local Font Definitions =========================================================== END === ==================================================================================================*/ /*================================================================================================== === Modifications to the Helix Ultimate Template, i.e. whole site ==================== START === ==================================================================================================*/ /*--- 20yy.mm.dd / phun ---------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------*/ /*--- 2023.04.19/ phun ---------------------------------------------------------------------------- Helix Ultimate shows too narrow left and right margins on screens wider than 1400px when the Helix template is set to "Body Boxed Layout". This is inherited from Bootstrap. Setting value from @media (min-width: 1200px) which is more appropriate. --------------------------------------------------------------------------------------------------*/ @media (min-width: 1400px) { .container { max-width: 1140px; /* Bootstrap CSS value: 1320px */ } } /*--- 2025.06.21 / phun ---------------------------------------------------------------------------- Enable hyphenation in all headers (levels 1-4, and paragraphs) --------------------------------------------------------------------------------------------------*/ h1, h2, h3, h4, p { -webkit-hyphens: auto; hyphens: auto; } /*--- 2023.03.20 / phun ---------------------------------------------------------------------------- Override the header height which is incorrectly changed on smaller devices. Seems to be a bug in the Helix framework at level 2.0.11 Override the logo height which is incorrectly changed on smaller devices. Seems to be a bug in the Helix framework at level 2.0.11 May be, this is corrected with v2.0.12 (not installed yet on 20230318 --------------------------------------------------------------------------------------------------*/ #sp-header, #sp-header .logo { height: 160px !important; /* This is overriding the setting from the template framework */ } .logo-image, .logo-image-phone { height: 140px !important; /* This is overriding the setting from the template framework */ } @media (max-width: 991px) { #sp-header, #sp-header .logo { height: 140px !important; /* This is overriding the setting from the template framework */ } .logo-image, .logo-image-phone { height: 120px !important; /* This is overriding the setting from the template framework */ } } @media (max-width: 767px) { #sp-header, #sp-header .logo { height: 100px !important; /* This is overriding the setting from the template framework */ } .logo-image, .logo-image-phone { height: 80px !important; /* This is overriding the setting from the template framework */ } } @media (max-width: 575px) { #sp-header, #sp-header .logo { height: 80px !important; /* This is overriding the setting from the template framework */ } .logo-image, .logo-image-phone { height: 60px !important; /* This is overriding the setting from the template framework */ } } /*--- 2025.01.25 / phun ---------------------------------------------------------------------------- Set a small border below the header --------------------------------------------------------------------------------------------------*/ #sp-header { border-bottom: 2px solid #e0e0e0; margin-bottom: 20px; } /*--- 2023.03.21 / phun ---------------------------------------------------------------------------- Align the menu items to the right. --------------------------------------------------------------------------------------------------*/ #sp-menu.menu-with-social .sp-megamenu-wrapper { justify-content: flex-end !important; } /*--- 2025.07.06 / phun ---------------------------------------------------------------------------- Move the menu line more towards the bottom of the header, but only until the hamburger item in place of the menu items is shown, then leave at standart (=100%). --------------------------------------------------------------------------------------------------*/ @media (min-width: 992px) { #sp-menu > .sp-column { height: 150% !important; } } @media (max-width: 1199.98px) { .sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span, .sp-dropdown li.sp-menu-item > a { font-size: 1.1rem !important; } ul.social-icons { margin-left: 20px !important; } } /*--- 2025.03.05 / phun ---------------------------------------------------------------------------- Asjust margin, padding, and change color of social media icons in header --------------------------------------------------------------------------------------------------*/ #sp-menu ul.social-icons a { color: #0088cc !important; } #sp-menu ul.social-icons a:hover { color: #b5874a !important; } #sp-menu ul.social-icons a:active { color: #1a467a !important; } /*--- 2023.04.12 / phun ---------------------------------------------------------------------------- Show a thin line below main menu and off-canvas menu sub-items. --------------------------------------------------------------------------------------------------*/ .sp-dropdown-inner > ul.sp-dropdown-items > li , .offcanvas-menu .offcanvas-inner ul.menu ul.menu-child > li { border-bottom: 1px solid #ccc; } /*--- 2025.03.05 / phun ---------------------------------------------------------------------------- Reduce the top and bottom padding of the main body (see Helix Ultimate Hints below). --------------------------------------------------------------------------------------------------*/ .com-content #sp-main-body, #sp-main-body { padding: 0px !important; } /*--- 2023.04.13 / phun ---------------------------------------------------------------------------- The off-canvas link hover, and active colors cannot be set as expected via Helix framework?? --------------------------------------------------------------------------------------------------*/ .offcanvas-menu .offcanvas-inner ul.menu ul.menu-child > li > a:hover { color: #b5874a; } .offcanvas-menu .offcanvas-inner ul.menu ul.menu-child > li > a:active { color: #7694a6; } /*--- 2023.04.05 / phun ---------------------------------------------------------------------------- Offcanvas Menu: Let the whole line act as menu toggler. This solution was presented as answer to my question on Joomshaper Forum on April 5, 2023 (https://www.joomshaper.com/forum/question/23872) NOTE: The solution only works when menu heading are links themselves, not pure menu headings. --------------------------------------------------------------------------------------------------*/ body.ltr .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .nav-header > .menu-toggler, body.ltr .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .menu-separator > .menu-toggler, body.ltr .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a > .menu-toggler { width: 100%; text-align: right; } /*--- 2023.03.18 / phun ---------------------------------------------------------------------------- Make the bottom and footer title a bit darker. Rearrange margin, and padding --------------------------------------------------------------------------------------------------*/ #sp-bottom { /* Template value is: padding: 60px 0 30px */ padding: 20px 0px 20px 0px; } #sp-bottom .sp-module .sp-module-title { /* Text color in bottom cannot be set via template framework */ color: #d8d8d8; /* Template value is: margin: 0 0 30px */ margin: 20px 0px 10px 0px; } /*--- 2023.03.24 / phun ---------------------------------------------------------------------------- Increase the size of Offcanvas (=) Menu It's also easy, please use below custom CSS Notice! The default value for [=] width is 25px, and height is 2px. phun: The burger symbols is made of three span elements --------------------------------------------------------------------------------------------------*/ .burger-icon { width: 40px; } @media (max-width: 575px) { .burger-icon { width: 30px; } } .burger-icon > span { height: 4px; } /*--- 2023.03.24 / phun ---------------------------------------------------------------------------- Bottom align the burger menu icon with the header text "SarahEugster --------------------------------------------------------------------------------------------------*/ @media (max-width: 991px) { #offcanvas-toggler { height: 150px; } } @media (max-width: 767px) { #offcanvas-toggler { height: 115px; } } @media (max-width: 575px) { #offcanvas-toggler { height: 95px; } } /*--- 2023.03.24 / phun ---------------------------------------------------------------------------- Format the text "Sarah Eugster" which is placed after the Logo via custom module Update 2023.04.04 ----------------- The text is currently NOT shown, i.e. the custome module is unpublished (but not deleted). Uncomment below selectors, it the module is published again. --------------------------------------------------------------------------------------------------*/ /*--- Start of selectors for heading custom module "Sarah Eugster" --- .phun_text_after_logo { font-size: 30px; padding-top: 50px; } .phun_text_after_logo > div > div > p > a, .phun_text_after_logo > div > div > p > a:hover, .phun_text_after_logo > div > div > p > a:focus, .phun_text_after_logo > div > div > p > a:active { color: #374D5A; } @media (max-width: 991px) { .phun_text_after_logo { font-size: 30px; padding-top: 40px; } } @media (max-width: 767px) { .phun_text_after_logo { font-size: 20px; padding-top: 30px; } } @media (max-width: 575px) { .phun_text_after_logo { font-size: 18px; padding-top: 30px; } } /*--- End of selectors for heading custom module "Sarah Eugster" --- /*================================================================================================== === Modifications to the Helix Ultimate Template, i.e. whole site ==================== END === ==================================================================================================*/ /*================================================================================================== === Modifications of the Joomla objects ============================================= Start === ==================================================================================================*/ /*--- 2025.03.05 / phun ----------------------------------------------------------------------------- Modify the look of the category content (used as title) in the blog view --------------------------------------------------------------------------------------------------*/ .blog .category-desc { margin: 40px 0px 20px 25px; } /*--- 2025.06.26 / phun ---------------------------------------------------------------------------- Hide the unwanted "Featured" badge that Helix is adding at the top of featured articles. See the following page: https://www.joomshaper.com/documentation/helix-framework/customization-tips#how-to-hide-featured-badge-in-articles --------------------------------------------------------------------------------------------------*/ .article-list .article .featured-article-badge { display: none; visibility: hidden; } .article-details .featured-article-badge { display: none; visibility: hidden; } /*--- 2025.03.02 / phun ---------------------------------------------------------------------------- Modify the look of articles and the "read-more" link in the blog views. --------------------------------------------------------------------------------------------------*/ .article-list .article { border-bottom: 4px ridge #0088cc !important; /* border-bottom: 2px groove #eee !important; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.19) !important; */ } .article-details { /* margin-top: 20px; */ margin-bottom: 60px; padding: 0px 20px 20px 20px; border-bottom: 4px ridge #0088cc !important; } .readmore { margin: 40px 0px 20px 20px !important; width: 100% !important; font-style: italic !important; font-size: 1.2rem !important; } .readmore a { color: #2165ae !important; } .readmore a:hover { color: #b5874a !important; } .readmore a:active { color: #1a467a !important; } /*--- 2025.07.03 / phun ---------------------------------------------------------------------------- Modify the look of the custom module "Aktuelles Content Top Mmodule" --------------------------------------------------------------------------------------------------*/ .phun-site-modul-aktuelles { border-bottom: 4px ridge #0088cc !important; padding-left: 20px; padding-bottom: 20px; margin-bottom: 20px; } /*--- 2025.07.06 / phun ---------------------------------------------------------------------------- Modify the look of the custom module "Start Content Top Mmodule" --------------------------------------------------------------------------------------------------*/ .phun-site-modul-start { padding: 20px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important; background-color: #fff; } .phun-site-modul-start .readmore { margin: 20px 0px 0px 0px !important; } /*--- 2025.07.03 / phun ---------------------------------------------------------------------------- Modify the look of the standard logout page: Center the button. --------------------------------------------------------------------------------------------------*/ .logout .form-horizontal .controls { display: flex; justify-content: center; margin: 60px 0px; } /*================================================================================================== === Modifications of the Joomla objects============================================== END === ==================================================================================================*/ /*================================================================================================== === Modifications to the SP Page Builder CSS file (sppagebuilder.css) ================ START === ==================================================================================================*/ /*--- 2023.04.19/ phun ---------------------------------------------------------------------------- SP Page Builder pages show too narrow left and right margins on screens wider than 1400px when the Helix template is set to "Body Boxed Layout". Setting value from @media (min-width: 1200px) which is more appropriate. --------------------------------------------------------------------------------------------------*/ @media (min-width: 1400px) { .sppb-row-container { max-width: 1140px !important; /* SP Page Builder CSS value: 1320px */ } } /*--- 2023.04.16 / phun ---------------------------------------------------------------------------- Increase bottom margin of text-add-on titles --------------------------------------------------------------------------------------------------*/ div.sppb-addon.sppb-addon-text-block > h3.sppb-addon-title { margin-bottom: 1em !important; } /*================================================================================================== === Modifications to the SP Page Builder CSS file (sppagebuilder.css) ================ END === ==================================================================================================*/ /*================================================================================================== === Modifications to the Phoca Gallery - Standard theme ============================== START === ==================================================================================================*/ /*--- 2025.06.27 / phun ---------------------------------------------------------------------------- Remove the shadowed bow around the back button --------------------------------------------------------------------------------------------------*/ .ph-si-back-medium { color: #0088cc !important; background: none !important; box-shadow: none !important; } /*--- 2025.06.27 / phun ---------------------------------------------------------------------------- Don't increase font size for category tiles --------------------------------------------------------------------------------------------------*/ .pg-item-box-title, .pg-category-box-title { font-size: 1.0rem; !important; } /*--- 2025.07.05 / phun ---------------------------------------------------------------------------- Don't show picture count and folder icon in category tiles --------------------------------------------------------------------------------------------------*/ .pg-category-box-count { display: none !important; } .ph-si-category { display: none !important; } /*================================================================================================== === Modifications to the Phoca Gallery - Standard theme ============================== END === ==================================================================================================*/ /*================================================================================================== === Modifications to the Phoca Download Component ==================================== START === ==================================================================================================*/ /*--- 2025.08.13 / phun ---------------------------------------------------------------------------- Suppress the file counter in subcategory views --------------------------------------------------------------------------------------------------*/ div.pd-subcategory small { display: none;; } /*================================================================================================== === Modifications to the Phoca Download Component ==================================== END === ==================================================================================================*/ /*================================================================================================== === Modifications to the SP Page Builder Pages, using custom classes ================= START === ==================================================================================================*/ /* @media (max-width: 1199.98px) { } @media (max-width: 991.98px) { } @media (max-width: 767.98px) { } @media (max-width: 575.98px) { } */ /*--- 2025.02.12 / phun ---------------------------------------------------------------------------- General CSS classes for use on the SPPB pages. --------------------------------------------------------------------------------------------------*/ .phun-image-shadow img { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important; background-color: #fff; } /*--- 2025.02.12 / phun ---------------------------------------------------------------------------- Set the margins to indent and separate the captcha box --------------------------------------------------------------------------------------------------*/ .sppb-dynamic-recaptcha { margin: 20px 0px 20px 40px; } /*--- 2025.02.12 / phun ---------------------------------------------------------------------------- Set the attributes for the sponsoring logos at the bottom of each page. --------------------------------------------------------------------------------------------------*/ .phun-sponsor-logo-at-bottom { width: 220px; margin: 10px 0px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important; background-color: #fff; } .phun-sponsor-logo-at-bottom p { color: #888; font-size: small; text-align: center; } .phun-sponsor-module-at-bottom { background-color: #f0f0f0; } /*--- 2025.02.12 / phun ---------------------------------------------------------------------------- Set the attributes for the sponsoring logos on the sponsoring page. --------------------------------------------------------------------------------------------------*/ .phun-sponsor-logo-at-sponsor-page { /* margin: 10px 0px; */ /* background-color: #fff; */ } .phun-sponsor-logo-at-sponsor-page img { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important; } /*--- 2025.02.28 / phun ---------------------------------------------------------------------------- Home page "Wo die Erde beben wird" formatting --------------------------------------------------------------------------------------------------*/ .phun-wo-die-erde-beben-wird { /* background-color: #f8f8f8 !important; */ } /*--- 2025.02.28 / phun ---------------------------------------------------------------------------- Home page Latest News formatting --------------------------------------------------------------------------------------------------*/ .phun-latest-news-collection { background-color: RGBA(33, 101, 173, 0.05) !important; } .phun-news-item-detail-outer-box { border-left: 4px dotted #2165ae; margin: 10px 0px 0px 50px ; } @media (max-width: 1199.98px) { .phun-news-item-detail-outer-box { margin: 10px 0px 0px 40px; } } @media (max-width: 991.98px) { .phun-news-item-detail-outer-box { margin: 10px 0px 0px 30px; } } @media (max-width: 767.98px) { .phun-news-item-detail-outer-box { margin: 10px 0px 0px 20px; } .phun-news-item-detail-inner-box { display: block !important; } } @media (max-width: 575.98px) { .phun-news-item-detail-outer-box { margin: 10px 0px 0px 10px; } } .phun-news-item-detail-inner-box { display: flex !important; align-items: center !important; } @media (max-width: 767.98px) { .phun-news-item-detail-inner-box { display: block !important; } } .phun-news-item-detail-image-box { width: 400px; margin: 20px 20px 20px 40px !important; } @media (max-width: 991.98px) { .phun-news-item-detail-image-box { width: 300px; } } @media (max-width: 767.98px) { .phun-news-item-detail-image-box { width: auto; max-width: 400px; } } .phun-news-item-detail-image { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important; } .phun-news-item-detail-text-box { margin: 20px 0px 20px 20px !important; } @media (max-width: 767.98px) { .phun-news-item-detail-text-box { margin: 20px 0px 20px 40px !important; } } .phun-news-item-detail-text { } .phun-latest-news-readmore-button-box { width: 100% !important; font-style: italic; font-size: 1.2rem; margin-top: 20px; } /*--- 2026.02.26 / phun ---------------------------------------------------------------------------- Special formatting for image attribution text and links (e.g. images from pixabay) --------------------------------------------------------------------------------------------------*/ .phun-image-attribution { margin-top: 10px; font-size: 8pt !important; color: #c0c0c0 !important; text-align: center; } .phun-image-attribution a, .phun-image-attribution a:active, .phun-image-attribution a:focus { text-decoration: underline !important; color: #c0c0c0 !important; } .phun-image-attribution a:hover { text-decoration: none !important; color: #808080 !important; } /*--- 2026.06.26 / phun ---------------------------------------------------------------------------- Remove padding on "news" menu page so the blog frames are in line with the content-top module --------------------------------------------------------------------------------------------------*/ .phun-news-menu-page { padding-left: 0px !important; padding-right: 0px !important; } /*--- 2023.03.24 / phun ---------------------------------------------------------------------------- Set "Background image" for HOME page to none in SP Page Builder, and select here based on @media. Also set anything related to the background here, since SPPB and iOS don't work well. --------------------------------------------------------------------------------------------------*/ .phun-sp-page-home-top-row { background-image: url(/images/reitcoach/staticpages/reitcoach-02-landscape-sepia.jpg) !important; background-repeat: no-repeat !important; background-size: cover !important; /* cover !important; */ /* contain !important; */ background-attachment: scroll !important; /* fixed */ background-position: 0px 0px !important; box-shadow: none !important; /* SPPB sets to 0px 0px 0px 0px #FFFFFF; */ } @media only screen and (min-width: 1400px) { .phun-sp-page-home-top-row { /* background-image: url(/images/reitcoach/staticpages/reitcoach-home-top-row-landscape.jpg) !important; */ } } @media only screen and (max-width: 1399px) { .phun-sp-page-home-top-row { /* background-image: url(/images/reitcoach/staticpages/reitcoach-home-top-row-landscape.jpg) !important; */ } } @media only screen and (max-width: 767px) { .phun-sp-page-home-top-row { background-image: url(/images/reitcoach/staticpages/reitcoach-02-portrait-sepia.jpg) !important; } } /*--- 2023.04.12 / phun ---------------------------------------------------------------------------- Special list item bullet ------------------------ Special list style using the favicon (PNG not SVG!). The list and list style have to be defined in the page source (otherwise, no ul/li elements). Line spacing cannot be set there, so set here. --------------------------------------------------------------------------------------------------*/ .phun-favicon-list > div > ul > li { list-style-image: url(/images/reitcoach/template/favicon-40x32.png); padding-bottom: 20px; } /*================================================================================================== === Modifications to the SP Page Builder Pages, using custom classes ================= END === ==================================================================================================*/ /*================================================================================================== === Modifications to various parts =================================================== START === ==================================================================================================*/ /*--- 2023.04.14 / phun ---------------------------------------------------------------------------- Change the look and feel of the CookieHint plugin (from reDim.de) --------------------------------------------------------------------------------------------------*/ #redim-cookiehint .cookiebuttons .btn { font-size: 14px; } /*================================================================================================== === Modifications to various parts =================================================== END === ==================================================================================================*/ /*======================================================================================================= ========================================================================================================= ========================================================================================================= ====== ======== ====== NO ACTIVE DIRECTIVES BELOW THIS SEPARATOR! CUT LINES FROM THERE TO BOTTOM FOR PRODUCTION ======== ====== ======== ========================================================================================================= ========================================================================================================= =======================================================================================================*/ /*================================================================================================== === Information about the Bootstrap system used with Helix Ultimate ================== START === ==================================================================================================*/ /*--------------------------------------------------------------------------------------------------------- Available breakpoints ===================== Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively. These breakpoints can be customized if you’re using our source Sass files. Breakpoint Class infix Dimensions Min-Based Media directive Max-Based Media directive ----------------- ----------- ---------- ------------------------- ------------------------- X-Small None <576px - none - @media (max-width: 575px) Small sm ≥576px @media (min-width: 576px) @media (max-width: 767px) Medium md ≥768px @media (min-width: 768px) @media (max-width: 991px) Large lg ≥992px @media (min-width: 992px) @media (max-width: 1199px) Extra large xl ≥1200px @media (min-width: 1200px) @media (max-width: 1399px) Extra extra large xxl ≥1400px @media (min-width: 1400px) - none - NOTE (phun): Last directive wins in CSS, so "min-width" directives must be smallest first, "max-width" directives must be lasrgr first! @media (max-width: 1399px) { } @media (max-width: 1199px) { } @media (max-width: 991px) { } @media (max-width: 767px) { } @media (max-width: 575px) { } Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12. Breakpoints are also representative of a subset of common device sizes and viewport dimensions—they don’t specifically target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device. ---------------------------------------------------------------------------------------------------------*/ /*================================================================================================== === Information about the Bootstrap system used with Helix Ultimate ================== END === ==================================================================================================*/ /*================================================================================================== Following modifications are from Joomshaper's Customization Tips for Helix Ultimate 2.0 Template DO NOT ACTIVATE ANYTHING BELOW! COPY ABOVE TO ACVITAVE! (phun) To see changes remember to disable CSS compression, and clear the Joomla cache, especially if you use JCH Optimize or a similar CSS compressor tool after using the above code. You may need to refresh/clear the browser cache as well. ==================================================================================================*/ /*-------------------------------------------------------------------------------------------------- How to hide Icon from Breadcrumbs --------------------------------- If you're using Helix Ultimate 2.0.x you may notice that in the first position of breadcrumb there is an icon (map marker). Yes, it can be hidden by using custom CSS: ==> .breadcrumb .divider.fas.fa-map-marker-alt { display: none; } --------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------- How to reduce space between Header and Article(s) area ------------------------------------------------------ If the space (padding) between the header and article and blog view is too big for you (by default is 100px), you can reduce it. ==> .com-content #sp-main-body { change top & bottom padding padding: 10px 0; } .com-content #sp-main-body { change top padding, only padding-top: 0px; } If you want to reduce to 0px paddings only in a single (detailed) article view - please use the below line: ==> .view-article #sp-main-body { padding: 0px; } Notice! By default in SP Page Builder view from Page, the top and bottom padding doesn't exist at all, the value is set to 0. --------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------- How to reduce space between Header and Component area ----------------------------------------------------- If you want to reduce top space (padding) between the header and the main body please use the following Custom CSS ==> #sp-main-body { padding-top: 0px; } Notice! The default value from template styles was set at 100px. You can use any value you want, but it will be used for all components (articles, sp page builder, sp simple portfolio etc.) and everywhere on all subpages. --------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------- How to show Offcanvas Menu sooner --------------------------------- You can hide MegaMenu and display Offcanvas Menu also of chosen by you resolution, but it request using extra Custom CSS. Here is example for 1024px, you can change to 1280px as well. First line force to show [=] icon, and second to hide mega menu. ==> @media screen and (max-width: 1024px) { #sp-header #offcanvas-toggler.offcanvas, #sp-header #offcanvas-toggler.mega { display: block !important; } .sp-megamenu-parent.d-none.d-lg-block { display: none !important; } } or @media screen and (max-width: 1280px) { .sp-megamenu-parent { display: none !important; } #offcanvas-toggler { display: flex !important; } } --------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------- How to change the color of Offcanvas (=) Menu icon used in header ------------------------------------------------------------------ It's very easy, since Helix Ultimate 2.0.12 update you can change colors using Template Options > Presets > Edit > Off-canvas Menu settings Notice! Remember to disable SCSS in the Advanced tab first, also during that change, CSS Compression must be Off. For templates that do not have that feature yet, you can also do that using a custom CSS method: ==> .burger-icon > span { background-color: white !important; } --------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------- How to increase the size of Offcanvas (=) Menu ---------------------------------------------- It's also easy, please use below custom CSS ==> .burger-icon { width: 35px; } .burger-icon > span { height: 4px; } Notice! The default value for [=] width is 25px, and height is 2px. --------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------- Offcanvas Menu: How to change the color of closing (x) ------------------------------------------------------ It's also easy, to change the color of (x) icon from black to red please use below custom CSS ==> .offcanvas-active .burger-icon > span, #modal-menu-toggler.active .burger-icon > span { background-color: red; } --------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------- Offcanvas Menu: How to display all submenu items ------------------------------------------------ If you want to display all submenu items from the mobile menu that users don't have to click (+) to see them all. It's possible, but requests using custom CSS code: ==> .menu-parent .menu-child { display: block !important; } .menu-parent .menu-toggler { display: none !important; } In some cases, to be able to scroll down thru the mobile menu you have to add/use also this CSS line ==> .offcanvas-menu { overflow: scroll; } --------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------- Offcanvas Menu: How to change ">" open icon and submenu item's color -------------------------------------------------------------------- In the off-canvas menu, submenu items can be opened using a ">" icon, by default it has black color. To change its color it requests using custom CSS code. Below is an example using a WhiteSmoke color (you can use classic white, green, or yellow instead, as you wish): ==> .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a > .menu-toggler, .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .menu-separator > .menu-toggler { color: whitesmoke; } To change submenu items the in off-canvas (mobile) menu you have to use custom CSS as well. Here is an example with yellow color, but you can use white or another color. ==> .offcanvas-menu .offcanvas-inner ul.menu > li li a { color: yellow; } --------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------- How to change 'Sign In' Link Color ---------------------------------- It's pretty easy, but request using custom CSS code. Below is an example using a white color: ==> a.sp-sign-in { color: white; } To add hover color effect (yellow) add and use also this line: ==> a.sp-sign-in:hover, a.sp-sign-in:focus { color: yellow; } --------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------- How to Translate the Sign-in, Profile and Logout links ----------------------------------------- It's a template language phrase. Please go to System -> Language Overrides, choose your language (Site), and create a new override for those language strings: ==> HELIX_ULTIMATE_SIGN_IN_MENU HELIX_ULTIMATE_USER_PROFILE HELIX_ULTIMATE_USER_LOGOUT General tip: All phrases used by the Helix template (in front and admin area) are inside that file: languages/en-GB/en-GB.tpl_shaper_helixultimate.ini --------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------- How to disable/hide Meta generator with Helix Ultimate name ----------------------------------------------------------- If you don't need default meta with Helix name inside: ==> In the older version of Helix Ultimate you can hide it by using small code customization - edit that file: plugins\system\helixultimate\src\Core\HelixUltimate.php where you have to edit line 312: $this->doc->setGenerator('Helix Ultimate - The Most Popular Joomla! Template Framework.'); Then replace the default text with a custom one, you can use any word, for example, "CMS" or your company business name. To edit php files you can use File Manager from cPanel or Phoca Commander component (J3 / J4) or FTP tool. Remember to keep exactly this same filename "HelixUltimate.php" (!) UPDATE! Since Helix Ultimate 2.0.6 update , it means in 2.0.9+ you can override the above phrase using Languages: Overrides, like in the below example. HELIX_ULTIMATE_GENERATOR_TEXT --------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------- How to reduce space between menu items -------------------------------------- If you have several menu items and not all of them are in one row - all you have to do is reduce the space between menu items. Below is an example: ==> .sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span { padding: 0 10px; } By default, there is 15px of left and right padding between menu items. The value of 10px seems to be reasonable. Above custom code put inside Custom CSS section of Helix Ultimate or custom.css file. Of course, you can reduce this value only for smaller selected screen sizes using @media. Example CSS syntax: ==> @media screen and (max-width: 1199px) { .sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span { padding: 0 10px; } } --------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------- How to change the position of the menu? --------------------------------------- By default, in most cases, the menu is algin to the left side, close to the logo picture. In the old Helix-based template, you could have a menu aligned to the right side or most to the center. To center menu you have to use custom CSS with new justify-content property value: ==> #sp-menu > .sp-column, #sp-menu .sp-megamenu-wrapper { justify-content: center !important; } To move the menu to the right side use below custom CSS code: ==> #sp-menu > .sp-column, #sp-menu .sp-megamenu-wrapper { justify-content: end !important; } --------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------- How to hide the 3rd level of a menu in MegaMenu ----------------------------------------------- From Navigation and MegaMenu settings it's not possible, but by using custom CSS you can hide from viewers' 3rd submenu. It's mostly for Desktop and Laptop users: ==> @media (min-width: 840px) { .sp-megamenu-parent .sp-dropdown.sp-dropdown-sub .sp-dropdown-inner, body.ltr .sp-megamenu-parent .sp-dropdown .sp-dropdown-items .sp-has-child > a::after { display: none; visibility: hidden; } } --------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------- How to change the order of elements in the Article view ------------------------------------------------------- If your projects request changing the position (order) of Article Title and Image you have two options to do this. o By template article view customization: plugins\system\helixultimate\overrides\com_content\article\default.php o Or by custom CSS code: ==> for single article .view-article .article-details { display: flex; flex-direction: column; } .view-article .article-header { order: -1; margin-bottom: 20px; } If you want to change it for the Article list in Blog view as well then use below Custom CSS: ==> for articles list .article-list .articleBody, .article-list .article-body { display: contents; } .article-list .article { display: flex; flex-direction: column; } .article-list .article-header { order: -1; margin-bottom: 20px; } --------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------- How to add Smooth Scrolling --------------------------- There are many ways to add this nice looking feature to Helix based template, you can: o Install an extra Smooth Scrolling type plugin from JED. o Download and use smooth-scrolling javascript code inside the custom.js file. But by default, Helix Ultimate 2.0 template use Bootstrap 5.x where scroll-behavior: smooth property is already used. It specifies whether to smoothly animate the scroll position, instead of a straight jump for the whole page. The scrolling box scrolls in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time. Note: it is also possible to add it to a specific element/scroll container. Browser support: Chrome, Edge (new), Firefox, Safari, Opera. For browsers that do not support the scroll-behavior property or you want a more advanced (configurable) solution, you should use JavaScript / jQuery or ready plugin. --------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------- How to add webp image type support ---------------------------------- By default, Joomla 3.10 or Joomla 4 may not use this image extension format, so you have to add it manually. In Joomla Admin go to Media - click "Options" then please add mentioned phrases. Screenshot from Joomla 3.10 with correct settings. In Joomla 4 it's very similar. ==> Add "webp" to "Legal Extensions (File Types)", and to "Legal Image Extensions (File Types)" Add "image/webp" to "Legal MIME Tyes" --------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------- How to use a custom font(s) --------------------------- In this guide, you will learn the basics of how to use self-hosted fonts in the Helix Ultimate template. Useful for custom fonts (that are not part of the Google font family) for text elements. According to browsers support stats, the WOFF (.woff) is supported in 98% and the WOFF 2.0 format in 96% (info from Sep 2022). Only IE8 and older android mobile browsers don’t support it. FontSquirrel still create SVG, however, browsers do not need that anymore. Every browser (including IE!) is able to use woff, ttf and otf fonts (there is one catch for IE, though: It needs an ‘installable’ flag). In most cases, all you need is using max two font formats per font. In the following example, I used the font AMATIC , designed by: Vernon Adams. To generate web font formats and CSS code - I used the online WebFonts Generator from fontsquirrel.com. Alternative max lite solution: http://webfonts.gidix.net/. Or you can download Web Fonts from MyFonts.com. Follow the steps: 1. Disable selected fonts in the Typography section (Template Options) 2. Copy all fonts files here: templates\shaper_helixultimate\fonts 3. Create a new file custom.css where you should put generated CSS code. 4. Then change paths for font files adding "../fonts/" at the beginning. 5. Also in the custom.css file for example define for what HTML tags (H1...h6, p, li) or classes your custom font should be used. ==> VIDEO guide: https://www.youtube.com/watch?v=MfAIT8cMuv4 --------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------- How to hide "Featured" badge in Articles In the Helix Ultimate 2.1 update we added a "Featured" badge that is displayed in a list of articles and a single article view if the article was marked as featured. Until we don't add the option On/Off, you have to use Custom CSS to hide it - if you don't want to display that red badge. To hide from the list of articles (blog view), use the Custom CSS: ==> .article-list .article .featured-article-badge { display: none; visibility: hidden; } To hide it from a single article view, use the Custom CSS: ==> .article-details .featured-article-badge { display: none; visibility: hidden; } --------------------------------------------------------------------------------------------------*/ /*================================================================================================== === Modifications to the Helix Ultimate Template, i.e. whole site ==================== END === ==================================================================================================*/