Recent
Categories
View Replies (24)

J51_Ensley (all newer J51 Templates?): Is it possible to make the size of mobile logo relative?

0
Votes
Undo
  1. MySigma
    MySigma
  2. Sherlock Holmes
  3. Commercial Templates
  4. Thursday, 26 November 2020
  5.  Subscribe via email
Hi!

Maybe someone is having an idea...

For the mobile logo of the J51_Template, I want to use relative image size. It's only possible to use a mobile logo without using relative image size. My customer sent me a link to a Prestashop as an example.... https://www.stoffkids.at. On mobiles, the images size of the logo is varying, depending if you are holding your phone upright or horizontal.

Thank you,
Manfred
Responses (24)
MySigma
MySigma
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

PERFECT! Thank you very much for your help and support.

Regards,
Manfred
  1. more than a month ago
  2. Commercial Templates
  3. # 1
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Manfred

To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

.is-sticky .header_main {

    position: relative !important;

}

.is-sticky .logo img {

    max-width: 100%;

}

.is-sticky .logo {

    padding: 25px 40px;

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 2
MySigma
MySigma
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

On scroll, the complete header should hide to get more space for the content. I've added a "go to top" plugin to get back to the top and see the header/menu again.

Logo, social media icons, menu button,... all should hide on scroll.

Thank you,
Manfred
  1. more than a month ago
  2. Commercial Templates
  3. # 3
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you Manfred. Many happy returns :)

Do you just wish to hide just the menu toggle button on scroll or the entire header (which contains the menu toggle)?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 4
MySigma
MySigma
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

A happy new year and thank you for your response. I've sent you an e-mail today morning. There should be the link inside. The e-mail was sent to info@joomla51.com. Didn' t you received it?

Manfred
  1. more than a month ago
  2. Commercial Templates
  3. # 5
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Manfred

Would you have a URL to an example of the mobile menu you wish to hide?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 6
MySigma
MySigma
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

I've tried different things but I don't get it work. ?
Could you give me some tips?

Your help is much appreciate!

Manfred
  1. more than a month ago
  2. Commercial Templates
  3. # 7
MySigma
MySigma
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

after another meeting with my customer we want to try another way. Is it possible to hide the menu instead of reducing the size when scrolling down the website on a mobile device? Currently I'm not using a module for the menus.

Best regards,
Manfred
  1. more than a month ago
  2. Commercial Templates
  3. # 8
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Manfred

Could you share a screenshot demonstrating the space you are referring to?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 9
MySigma
MySigma
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

I "nearly" fixed it ;) I reduced the free space beneath the logo with following code:



#container_header {

    height: 180px;

}


But when you scroll down and the logo gets smaller, there is again to much space beneath the logo. How can I reduce this empty space?

Kind regards,
Manfred
  1. more than a month ago
  2. Commercial Templates
  3. # 10
MySigma
MySigma
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
I think, I fixed it :)
  1. more than a month ago
  2. Commercial Templates
  3. # 11
MySigma
MySigma
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

top!! The icons are now on the right side... Thanks! Maybe it is also possible to reduce the empty space beneath of the logo? The idea was making the logo area smaller. You should see it on the screenshots / drafts which were sent to you. ;-)

Thank you very much!
Manfred
  1. more than a month ago
  2. Commercial Templates
  3. # 12
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Manfred

To amend you can add the following to the Responsive Custom CSS fields within the General -> Responsive Options tab of your template settings. For more details on using these fields may I suggest the following article... https://joomla51.com/tutorials/template-parameters/applying-custom-css-to-a-screensize-device

(edit to taste)

#socialmedia {

    position: absolute;

    top: 2rem;

    right: 5px;

}

#socialmedia ul {

    max-width: 32px;

    flex-wrap: wrap;

}

.slideout-toggle-open {

    position: relative;

    top: -30px;

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 13
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Manfred

Sure. Drafts can be sent to info@joomla51.com. For our reference please paste a link to this post in your email.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 14
MySigma
MySigma
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

would it be OK for you if I send you the drafts?

Manfred
  1. more than a month ago
  2. Commercial Templates
  3. # 15
MySigma
MySigma
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

I've talked to my customer yesterday and we made a draft how it should look like. I think that's not a big deal for you... Can I send you the draft via E-Mail and we talk if it's easy to realise? I don't want to make this thread to much off-topic.

Manfred
  1. more than a month ago
  2. Commercial Templates
  3. # 16
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Manfred

Strangely we are unable to replicate. On which size screen are you having this issue?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 17
MySigma
MySigma
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

sorry for my late response. The logo is now centered but it still goes to the left top when you scroll down the page. Is it possible to keep the logo always centered?

Manfred
  1. more than a month ago
  2. Commercial Templates
  3. # 18
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Manfred

To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

@media only screen and (max-width:959px) {

.header_main .wrapper960 {

    padding-right: 0;

}

.logo {

    width: 100%;

    display: flex;

    justify-content: center;

}}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 19
MySigma
MySigma
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

I removed the logo and it seems to get better. I think this was my fault because of the "unlucky" picture size of the mobile logo. Is it possible to CENTER the logo and keep it centered when scrolling? Currently the logo is moving to the left top of the screen.

Manfred
  1. more than a month ago
  2. Commercial Templates
  3. # 20
  • Page :
  • 1
  • 2


There are no replies made for this post yet.
Be one of the first to reply to this post!

Site Links

Recommended

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok