Recent
Categories
View Replies (13)

Boutique: move socialmedia icons next to the responsive menu

0
Votes
Undo
  1. reitano
    reitano
  2. Sherlock Holmes
  3. Commercial Templates
  4. Monday, 04 December 2017
  5.  Subscribe via email
Hello.
I'd like to move the socialmedia area in the right corner of the page.
I already moved the mobile menu icon on the left side; I've tried with some css rules but I don't know where I am wrong, on an iPhone 7 plus I can see the icons in the right place, but when switching to a smaller screen they are not where I want.
Is it possible to find together a solution?
References
  1. http://www.rdcustom.it
Responses (13)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

To amend try adding the following to the Custom CSS field of your templates parameters...

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

#socialmedia {

    top: 40px;

}}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 1
reitano
reitano
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
It is not working...
Attachments (1)
2017-12-06 20.17.00.png 2017-12-06 20.17.00.png
  1. more than a month ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

On smaller screens where would you like the icons positioned?

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 3
reitano
reitano
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
I’d like to show it in the right upper corner if responsive
  1. more than a month ago
  2. Commercial Templates
  3. # 4
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

You can try the following Custom CSS instead... 

@media only screen and (min-width: 768px) and (max-width: 959px) {#socialmedia {

    top: -261px !important;

}}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 5
reitano
reitano
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
thanks for your Kindly support, Ciaran.
Unfortunately no good news.

Attached you can see the result from an iPhone 6s and on an iPhone 7 Plus.

As you can see, instead of using header 1 and 2 or other module positions, I want to use socialmedia for quick links to cart and profile, cause I think is better from mobile and in general easiest to use
Attachments (4)
2017-12-11 22.11.34.png 2017-12-11 22.11.34.png
2017-12-11 22.11.38.png 2017-12-11 22.11.38.png
2017-12-11 22.12.03.png 2017-12-11 22.12.03.png
2017-12-11 22.12.07.png 2017-12-11 22.12.07.png
  1. more than a month ago
  2. Commercial Templates
  3. # 6
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hmmm.. a bit of a tricky one this.

As a last ditch hope could you try the following Custom CSS instead...

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

#socialmedia {

    position: fixed !important;

    top: 0 !important;

    right: 0 !important;

}}


Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 7
reitano
reitano
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
unfortunately no luck....
still same problem... I don't know how the template calculate the position
  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
Hello

May I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will examine this issue further. For our reference please paste a link to this post in your email.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 9
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you

You had some conflicting CSS. I have tidied this up a bit and it appears to be now displaying correctly?

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 10
reitano
reitano
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hello Ciaràn and thank for your Kindly help.
Witch kind of conflict?
Now it is displaying correctly
  1. more than a month ago
  2. Commercial Templates
  3. # 11
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

The suggested CSS above was conflicting with the custom CSS in the Responsive Options tab of your template settings. Removing the social icons CSS from the Responsive Options tab resolved the issue.

Ciarán
  1. more than a month ago
  2. Commercial Templates
  3. # 12
reitano
reitano
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you so much, ciarán!
Very helpful as usual!
Now it works perfectly and is beautiful to see!
10+
  1. more than a month ago
  2. Commercial Templates
  3. # 13
  • Page :
  • 1


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