Bring menu and button on one line in mobile

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
peaceandlove
Joomla! Guru
Joomla! Guru
Posts: 945
Joined: Wed Jul 08, 2009 12:40 pm

Bring menu and button on one line in mobile

Postby peaceandlove » Fri Aug 18, 2017 11:32 am

See our website

http://zevik.net/index.zevik.net/

if you see it on mobile, you can see facebook and menu on two different lines or up and down

we want to bring it on same line like

20891425_10154583903412330_762425244_n.png


is that possible using css?

Our purcase of template is expires and we did not want to pay for just a small question we have.
You do not have the required permissions to view the files attached to this post.

User avatar
day
Joomla! Explorer
Joomla! Explorer
Posts: 390
Joined: Tue Mar 14, 2006 12:20 pm

Re: Bring menu and button on one line in mobile

Postby day » Fri Aug 18, 2017 1:11 pm

It can be corrected from a template-custom css.
Other ways to correct it depends on the layout of your template, and the module positions you have used. Mind mentioning what template do you use?

peaceandlove
Joomla! Guru
Joomla! Guru
Posts: 945
Joined: Wed Jul 08, 2009 12:40 pm

Re: Bring menu and button on one line in mobile

Postby peaceandlove » Fri Aug 18, 2017 4:09 pm

I am using this template,

http://demo.cmsjunkie.com/directory/j-directory/

and we already have two position at top, with ratio of

3,9 in template style, in big window it display fine but menu get in bottom in mobile

this picture might clear you a alot about what i am saying

template.png
You do not have the required permissions to view the files attached to this post.

User avatar
day
Joomla! Explorer
Joomla! Explorer
Posts: 390
Joined: Tue Mar 14, 2006 12:20 pm

Re: Bring menu and button on one line in mobile

Postby day » Fri Aug 18, 2017 5:36 pm

The template looks a bit complicated to me. I tried the demo on mobile, but can't see the logo -- either in the mobile version or in the desktop version. Do you have a "template > style" page at admin. If so, which positions are allocated for the site logo and Facebook logo respectively?

You said the menu gets at the bottom in your mobile. On my mobile I can see the demo menu (icon) exactly as it is displayed on my desktop, and it works well. Or, do you mean the menu items are displayed in a line after line vertically.

The attachment shows top2 and menu. Where is top1?

Btw, have you approached your template provider.

peaceandlove
Joomla! Guru
Joomla! Guru
Posts: 945
Joined: Wed Jul 08, 2009 12:40 pm

Re: Bring menu and button on one line in mobile

Postby peaceandlove » Sat Aug 19, 2017 4:29 am

We cannot approch them as our purchase period expries.

This is our our website look in mobile

mobile.png


you can see facebook and menu in two lines

we simply want them to be

20891425_10154583903412330_762425244_n.png
You do not have the required permissions to view the files attached to this post.

peaceandlove
Joomla! Guru
Joomla! Guru
Posts: 945
Joined: Wed Jul 08, 2009 12:40 pm

Re: Bring menu and button on one line in mobile

Postby peaceandlove » Sat Aug 19, 2017 4:31 am

We simply want menu and facebook on one line.

User avatar
day
Joomla! Explorer
Joomla! Explorer
Posts: 390
Joined: Tue Mar 14, 2006 12:20 pm

Re: Bring menu and button on one line in mobile

Postby day » Sat Aug 19, 2017 8:59 am

So you have no logo; only Facebook logo. Since I can't see this logo on my mobile, I can't hazard a guess about its position. Are you sure you put the FB logo in the same position where the demo logo appears? Obviously, on the desktop, the logo and the top menu are not aligned. That's what I found while inspecting the site with Firebug. You have to do something about it first and see whether that makes any change.

peaceandlove
Joomla! Guru
Joomla! Guru
Posts: 945
Joined: Wed Jul 08, 2009 12:40 pm

Re: Bring menu and button on one line in mobile

Postby peaceandlove » Sat Aug 19, 2017 11:16 am

Yes, current i remove logo for some reason, but even it was there it positon was below so no issue on logo.

We just want facebook at left and menu at right on mobile

User avatar
Nidzo2203
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 163
Joined: Sat Nov 21, 2009 4:52 pm
Contact:

Re: Bring menu and button on one line in mobile

Postby Nidzo2203 » Sun Aug 20, 2017 6:49 pm

One way:
Find in /modules/mod_instantfblogin/assets/css/style.css

Code: Select all

a.ifbl_fbloginbutton, a.ifbl_fbloginbutton:hover, a.ifbl_fbloginbutton:visited, a.ifbl_gplusloginbutton, a.ifbl_gplusloginbutton:hover, a.ifbl_gplusloginbutton:visited, a.ifbl_twitterloginbutton, a.ifbl_twitterloginbutton:hover, a.ifbl_twitterloginbutton:visited, a.ifbl_linkedinloginbutton, ifbl_linkedinloginbutton:hover, a.ifbl_linkedinloginbutton:visited {
    position: relative;
    display: block;
    text-align: center;
    background: none!important;
   margin-bottom: 10px;
   }


Change/add
margin-bottom: -60px;
margin-right: 150px;


This way is not recommended because when module gets update it will overwrite this changes.

Proper way:
Depending on template you use create custom.css file and add:

Code: Select all

a.ifbl_fbloginbutton{
margin-bottom: -60px;
margin-right: 150px;
}


Result:
Responsive
mobile.jpg

Desktop
desktop.jpg
You do not have the required permissions to view the files attached to this post.


Return to “Templates for Joomla! 3.x”

Who is online

Users browsing this forum: gws, SharkyKZ and 4 guests