Remove H1 From Logo Image
Steve Stevenson
Hi there, hope you can help as I've spent hours researching with no luck.
Question: When inspecting my pages I always have a h1 tag for the logo image as below and would like a way of removing the h1 tag:
<h1 class="has-scroll-logo has-ratina-scroll-logo"><img class="sp-default-logo hidden-xs" src="/images/logo/logo-s.jpg" alt="Document Genetics"><img class="sp-scroll-logo hidden-xs" src="/images/logo/logo-s.jpg" alt="Document Genetics"><img class="sp-retina-logo hidden-xs" src="/images/logo/logo-s.jpg" alt="Document Genetics" width="200" height="71"><img class="sp-retinascroll-logo hidden-xs" src="/images/logo/logo-s.jpg" alt="Document Genetics" width="200" height="71"><img class="sp-default-logo visible-xs" src="/images/logo/logo-s.jpg" alt="Document Genetics"></h1>
I tried commenting out below in document-genetics.co.uk/public_html/templates/shaper_empire/css/template.css but it did not work: //#sp-header #sp-logo .logo h1 { // margin: 0; //}
Regards Steve Shaper_empire template Joomla 3.10.6
Paul Frankowski
Accepted AnswerWithout < h1 > in that file - that html tag is not used anymore. This is the only file that generate logo area.
So check deeper if you really removed h1 and cleaned Joomla cache after.
Paul Frankowski
Accepted AnswerHi Steve,
if you want to remove/replace < h1 > from logo - edit that file:
templates\shaper_empire\features\logo.php
Steve Stevenson
Accepted AnswerHi Paul, I have replaced all h1 with div in templates\shaper_empire\features\logo.php
I also commented out:
/ #sp-header #sp-logo .logo h1 { margin: 0; } /
in /shaper_empire/css/template.css
Was I correct repacing h1 with div because it did not work?
BTW this is the whole line when viewing page source:
<header id="sp-header"><div class="row"><div id="sp-logo" class="col-8 col-md-3 col-lg-2 "><div class="sp-column "><a class="logo" href="/"><h1 class="has-scroll-logo has-ratina-scroll-logo"><img class="sp-default-logo hidden-xs" src="/images/logo/logo-s.jpg" alt="Document Genetics"><img class="sp-scroll-logo hidden-xs" src="/images/logo/logo-s.jpg" alt="Document Genetics"><img class="sp-retina-logo hidden-xs" src="/images/logo/logo-s.jpg" alt="Document Genetics" width="200" height="71"><img class="sp-retinascroll-logo hidden-xs" src="/images/logo/logo-s.jpg" alt="Document Genetics" width="200" height="71"><img class="sp-default-logo visible-xs" src="/images/logo/logo-s.jpg" alt="Document Genetics"></h1></a></div></div><div id="sp-menu" class="col-4 col-md-9 col-lg-8 "><div class="sp-column "> <div class='sp-megamenu-wrapper'>
Regards Steve
Steve Stevenson
Accepted AnswerWas I correct repacing h1 with div because it did not work?
Thanks Steve
Paul Frankowski
Accepted Answeras alternative idea:
in Template Options - Layout - replace "logo" position with "top3" and publish Custom module with logo image inside "top3" position. It also will work.