css - Logo placement overlapping // Joomla Bootstrap -
on joomla 3.x bootstrap site want have logo placed overlapping navbar , slideshow that:
the navbar "fixed-top" , slideshow placed outside other container in order being displayed in full width. make matters more complicated, logo should fix on top while scrolling navbar. on mobile should move (again, navbar) , replaced (smaller) image.
how achieved?
the logo links home, right done putting both href , logo image in index.php.
to change image according viewport i'd have in css. how link home?
please me on getting placement of logo image (responsive) correctly.
.logo-wrapper { position: relative; z-index:1; } .toplogo { position:absolute; width:auto; height:auto; z-index:10; left: 0px; top: 0px; }<body id="<?php echo ($itemid ? 'itemid-' . $itemid : ''); ?>"> <div id="toplogo"> <a href="<?php echo $root = juri::root();?>" onfocus="blur()"> <img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo-test.png" title="zur startseite" alt="<?php echo $root = juri::root();?>" border="0"/> </a> </div> <!-- begin navbar--> <?php if ($this->countmodules('position-9')): ?> <div class="navbar navbar-inverse navbar-fixed-top"> <!-- navbar-inverse navbar-fixed-top --> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <!--<a class="brand" href="#"><?php echo $sitename ?></a>--> <div class="nav-collapse collapse"> <jdoc:include type="modules" name="position-9" style="none" /> </div> </div> </div> </div><!--end navbar--> <?php endif; ?> <?php if ($this->countmodules('position-5')): ?> <div class="bigimage"> <jdoc:include type="modules" name="position-5" style="none" /> <div class="clearfix"></div> </div><!--end bigimage--> <?php endif; ?> <div class="container"> <!-- begin header--> <div class="header"> <div class="header-inner">
consider layout :
<div class="row top-menu-row"> <!-- added .row --> <div class="span3"> <!-- added .span3 --> <a class="toplogo" href="http://www.lyzarr.com/testsite/" onfocus="blur()" style="z-index: 1; position: absolute;"> <img style="" src="/testsite/templates/test-template-joomla3-bootstrap_101/images/logo-test.png" title="zur startseite" alt="http://www.lyzarr.com/testsite/" border="0"> </a> </div> <!-- end .span3 --> <div class="span9 hidden-desktop"> <!-- added .span9 --> <a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> </div> <!-- end .span9 --> <div class="span9"> <!-- added .span9 --> <div class="nav-collapse collapse" style="z-index: 2; height: 0px;"> <ul class="nav menu nav-tabs"> <li class="item-101 current active"><a href="/testsite/"><span>home</span></a></li><li class="item-102 dropdown deeper parent"><a class=" dropdown-toggle" data-toggle="dropdown" href="#"><span>about<b class="caret"></b></span></a><ul class="nav-child unstyled small dropdown-menu"><li class="item-103"><a href="/testsite/about/info.html"><span>info</span></a></li></ul></li></ul> </div> </div> <!-- end .span9 --> </div> here logo goes first , menu after it. because bootstrap version 2.3.2 makes columns 100% width if device has horizontal resolution 480px , below. adding following styles fix width of columns in percents regardless of screen resolution:
.top-menu-row .span3 { width: 22% !important; float: left; height: auto; } .top-menu-row .span9 { width: 74% !important; float: right; } and in media query devices remove absolute positioning, make logo fit in column width:
@media (max-width: 767px) { a.toplogo { position:relative; } }
Comments
Post a Comment