Joomla Templates Club 406,261 posts

[matteo sitta Friend matteo sittaJoin date: September 2014Posts: 92Downloads:20Uploads:2 Thanks: 15 Thanked: 5 times in 1 posts]

#188126

Hello,
i have two questions

1.
In the portrait and landscape mobile layout i need to set the the button (btn-navbar) inside of logo div or to the left of it.
This is possible?

2.
In the landscape mobile layout I need to remove the the fixed position of header.

Thanks

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#495359

Hi

You can add all your needed configuration in your templatesja_briskcsscustom.css file

example

@media (max-width: 480px) {
.logo-image a {
background-image: url("../images/logo-mobile.png")!important;
background-repeat: no-repeat;
width: 280px;
height: 59px;
overflow: hidden;

}
and so on adding the other custom styles for your devices

[matteo sitta Friend matteo sittaJoin date: September 2014Posts: 92Downloads:20Uploads:2 Thanks: 15 Thanked: 5 times in 1 posts]

#495361

Hello – Ciao Pavit,

Thanks!

But if i change it with a css style inside of the admin layout panel i can’t show the new layout

Where i can found the list of layout dimensions (Wide – Normal – Tablet …)?

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#495364

<blockquote>Where i can found the list of layout dimensions (Wide – Normal – Tablet …)?</blockquote>

You can check in variables.less file in templatesja_briskless folder

[matteo sitta Friend matteo sittaJoin date: September 2014Posts: 92Downloads:20Uploads:2 Thanks: 15 Thanked: 5 times in 1 posts]

#495368

sorry but inside variables.less i dont found nothing of landscape and portrait of the mobile and tablet resolution

[matteo sitta Friend matteo sittaJoin date: September 2014Posts: 92Downloads:20Uploads:2 Thanks: 15 Thanked: 5 times in 1 posts]

#495371

My modify of the tablet are

[PHP]/* tablet */ @media (min-width: 768px) and (max-width: 979px) {
.ja-header .ja-mainnav {
width: 20%;
position: absolute;
}
.ja-header {

border-bottom: none;

}
}[/PHP]

but for the mobile i need to make a some difference before landscape and portrait

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#495381

I think that for this question would be better to pass all to Joomlart devs

So please open a ticket for this and inside ticket copy the link to this thread

Thanks

1 user says Thank You to pavit for this useful post

1. matteo sitta

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#495485

This way will help you fix two the problem your request

1) Move btn-navbar button beside logo

Open templates/ja_brisk/css/custom.css file

Add new script

@media (max-width: 767px) {
.t3-mainnav .navbar {
margin-top: 0;
position: relative;
top: -70px;
left: 80%;
}
}


2) I’m not sure about the position in header page as you mention but you can try with

@media (min-width: 768px) and (max-width: 979px {
//add script you need to do
}


2 users say Thank You to Ninja Lead for this useful post

1. pavit
2. matteo sitta

[matteo sitta Friend matteo sittaJoin date: September 2014Posts: 92Downloads:20Uploads:2 Thanks: 15 Thanked: 5 times in 1 posts]

#495553

Hello Ninja,
Thanks!
in the end this is my css config for make a different logo for mobile/tablet and remove the fixed header for landscape mobile

/* mobile */ @media (max-width: 767px) {
.logo-image a {
width: 300px;
height: 62px;
background-image: url(../../../images/themes/style/logo.png);
}
.ja-header .ja-mainnav {
position: absolute;
top:20px;
}
.ja-header {

border-bottom: none;

}

}

/* mobile */ @media (max-width: 480px) {
.ja-header .ja-mainnav {
position: relative;
}
.ja-header {

border-bottom: 1px solid #ddd

}
}

/* tablet */ @media (min-width: 768px) and (max-width: 979px) {
.logo-image a {
width: 200px;
height: 41px;
background-image: url(../../../images/themes/style/logo-mobile.png);
}
body {
line-height: @BaseLineHeight/1.33;
}
}

[Author]

Posts