MyBB Community Forums

I want to make my forum logo display only on computer devices and for mobiles apear only text (the name of my forum) is this possible? If yes how?

That's possible using CSS and media queries - according to the width of the display.

For example:
Computer display more then 720px. Mobile phone display less than 720px.

HTML:

<span id="logo_img"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></span>

<span id="logo_text"><a href="{$mybb->settings['bburl']}/index.php">Logo Text</a></span>

CSS:

#logo_text { display: none; }

@media screen and (max-width: 720px) {
  #logo_img { display: none; }
  #logo_text { display: block; }
}

This is avery simple way to switch (display/hide) the logo and text. Try it out and resize the browser windows.

[ExiTuS]

(2019-09-26, 03:49 PM)[ExiTuS] Wrote: [ -> ]That's possible using CSS and media queries - according to the width of the display.

For example:
Computer display more then 720px. Mobile phone display less than 720px.

HTML:

<span id="logo_img"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></span>

<span id="logo_text"><a href="{$mybb->settings['bburl']}/index.php">Logo Text</a></span>

CSS:

#logo_text { display: none; }

@media screen and (max-width: 720px) {
  #logo_img { display: none; }
  #logo_text { display: block; }
}

This is avery simple way to switch (display/hide) the logo and text. Try it out and resize the browser windows.

[ExiTuS]

I put the css you gave me in the responsive.css  and i changed the html in header template with this one you gave me and its working. But i got problem with padding and i cant fix it.

Thats my header html:

<header>
	<div class="navbar-header">    
		<div id="header">
			<div id="logo">
				<div class="wrapper">
				<br><a href="{$mybb->settings['bburl']}/index.php" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" class="logo"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a><br><br>
			  <div class="none">{$welcomeblock}<br><br></div>
		  </div>
		</div>

Edit: After searching for css and reading, reading, reading..... because im still noob.. i found it and it works perfectly. Thank you for the info. Keep helping.