Forum

Forum - DatingScript

Online dating software

You are not logged in.

#1 2019-08-31 09:05:43

hamjo
Member

center mobile logo

How can I center the mobile logo?

Offline

#2 2019-08-31 10:45:43

moomoocow
Member

Re: center mobile logo

If you centre the logo you will lose screen space my friend as the menu will appear in the next line down I think.

I personally think it looks better on the side, but that’s my opinion.

Offline

#3 2019-08-31 12:52:36

hamjo
Member

Re: center mobile logo

Thanks for the answer. I have used the default size and the logo is now above the menu (mobile view) that can then be centered. but I can not get it.

Offline

#4 2019-09-01 01:31:25

3urt0
Member

Re: center mobile logo

If you really want to centre it In templates/your template name/css
edit custom.less (if its called _custom.less rename it to custom.less)

add the below

.header a.logo {
    text-align: center;
    float: none !important;
}

Offline

#5 2019-09-01 01:40:05

3urt0
Member

Re: center mobile logo

Sorry I just realised you said the mobile logo.

You will need to wrap this around the above code so it will only affect the small screen size. Note edit the 750px to be the breakpoint for when you want it to center. From what I can tell the menu changes to the mobile menu at 767px.

@media all and (max-width: 750px) {
/* CSS code above goes here for screens lower than 750px */
}

Offline

#6 2019-09-01 03:54:01

moomoocow
Member

Re: center mobile logo

Thank you for info 3utr0

Offline

#7 2019-09-01 07:32:41

hamjo
Member

Re: center mobile logo

Thanks for the answers. does not work for me unfortunately.

Offline

#8 2019-09-01 18:19:42

3urt0
Member

Re: center mobile logo

Empty your application/cache folder and don’t forget to clear your browser cache.

Last edited by 3urt0 (2019-09-01 18:22:03)

Offline

#9 2019-09-02 04:41:35

hamjo
Member

Re: center mobile logo

yes, I did that.

should the finished code look like this?

@media all and (max-width: 750px) {
/* CSS code above goes here for screens lower than 750px */
.header a.logo {
    text-align: center;
    float: none !important;
}
}

Offline

#10 2019-09-02 05:18:04

3urt0
Member

Re: center mobile logo

Ok I figured it out. Sorry for the run around.

So this is assuming you have a logo uploaded for your website & you also have the mobile logo uploaded (in the template settings)

now firstly the code to go into custom.less is

@media all and (max-width: 750px) {
.logo img {
    margin-left: auto;
    margin-right: auto;
    float: none !important;
}
.logo-middle {
    float: none !important;
}
}

next we require editing the header file. So in templates/your template/header.php we want to look for the following line
(it is located directly under the if statement that says <? if ( config::item('mobile_logo', 'template', 'file') ): ?> )

<?=html_helper::anchor('', html_helper::image(config::item('mobile_logo', 'template', 'file'), array('width' => config::item('mobile_logo', 'template', 'width'), 'height' => config::item('mobile_logo', 'template', 'height'), 'alt' => config::item('site_title', 'system'), 'class' => 'logo mobile visible-ms hidden-sm')), array('class' => 'logo'))?>

See at the end of this line (shown above) it says 'logo' you need to edit inside the ' ' and make it 'logo logo-middle'

this will add the class logo-middle to that specific logo and will not affect the hidden desktop logo.

I tested this on my development set up so you will definitely get it this time. smile

Offline

Board footer