Support Central

Hi stephane-lavoisard,
The template using the Bootstrap grid, you can refer here
Also, Could you send me the admin account for further checking? We will check and help you resolve this issue.

Hi stephane-lavoisard,
The Bootstrap grid system is a powerful and responsive layout system that allows you to create complex layouts with ease. It is based on a 12-column grid, which makes it flexible and adaptable to various screen sizes and devices.

Columns: Columns are placed inside rows, and the grid system allows you to divide each row into up to 12 columns. You can specify the width of each column using classes like .col-, .col-sm-, .col-md-, .col-lg-, and .col-xl-, where the suffixes represent different screen sizes (extra small, small, medium, large, and extra large, respectively).

For example:
.col-6 creates a column that spans 6 out of 12 columns on all screen sizes.
.col-md-4 creates a column that spans 4 out of 12 columns on medium and larger screen sizes.

With your site, you can try this:

<div class="header-wrap row d-flex align-items-center collapse-static t4-height">
    <div class="col-5 col-lg-4 col-xl-4">
        <!-- logo section -->
    </div>
    <div class="t4-navbar col-1 col-lg-6 col-xl-6 d-flex justify-content-center collapse-static">
        <!-- menu item -->
    </div>

    <div class="t4-header-r col-6 col-lg-2 col-xl-2 d-flex align-items-center justify-content-end">
          <!-- offcanvas -->
    </div>
</div>

The layout consists of 3 columns, each spanning 4 , 6 and 2 out of 12 columns (40% - 60% - 20% width).

I have read this thread from start, and I cant get my head around how the logo configuration works. Have a look on my demo-site: It works well in desktop mode, but smaller screens will not apply. Either it gets bigger than I want, or it gets distorted.

https://2tot-nordic.no/Xoom-demo/Aktivist/

I have asked this question before, but it only partly resolved the problem.
Added this to custom CSS:

.t4-wrapper {background:#fff!important;}
.navbar-brand.logo-control img.logo-img {
max-height: unset !important;
}

Regards
Tor Otto Tollefsen

torotto Hi

Could you share screenshot of how you want to achieve with the logo?

Hi, I think what I want is obivous, but I can show you how I don´t want it.
(I have made a clean install of Ja Rights to research this issue)

Desktop/big screen is OK. Medium screen, like ipad portrait is good, but ipad landsc shows the smaller logo and mobile screen shows bigger and partly hidden by mastehead module.

#1: Normal - no issues:

#2: I pad landscape: - shows the smaller logo - (should have been bigger):

#3: Mobile screen - shows the bigger logo, hidden behind top of masthead. Should have been the smaller logo.

Regards / tot