徽標位置重疊//的Joomla引導

在我Joomla 3.x Bootstrap site我想有重疊放置這樣的導航欄和幻燈片徽標：徽標位置重疊//的Joomla引導

導航欄是「固定頂」及幻燈片放置在任何其他容器之外以便以全寬度顯示。爲了使事情更加複雜，徽標應該像滾動條一樣在滾動時固定在頂部。但是在移動設備上，它應該向上移動（再次像導航欄），甚至被另一個（較小的）圖像取代。

這怎麼可能實現？

徽標鏈接到家，現在通過將href和徽標圖像本身放在index.php中完成。

要根據視口輕鬆更改圖像，我必須在CSS中執行此操作。但那麼如何鏈接到家？

請幫助我正確獲取徽標圖像（響應）的位置。

.logo-wrapper { 
 
\t position: relative; 
 
\t z-index:1; 
 
} \t 
 
\t 
 
.toplogo { 
 
    position:absolute; 
 
    width:auto; 
 
    height:auto; 
 
    z-index:10; 
 
    left: 0px; 
 
    top: 0px; 
 
}

<body id="<?php echo ($itemid ? 'itemid-' . $itemid : ''); ?>"> 
 

 
\t \t \t  <div id="toplogo"> 
 
\t \t \t \t <a href="<?php echo $root = JURI::root();?>" onfocus="blur()"> 
 
\t \t \t \t <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"/> 
 
\t \t \t \t </a> 
 
\t \t \t \t </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')): ?> 
 
\t \t \t \t <div class="bigimage"> 
 
\t \t \t \t \t <jdoc:include type="modules" name="position-5" style="none" /> 
 
\t \t \t \t \t <div class="clearfix"></div> 
 
\t \t \t \t </div><!--End Bigimage-->   
 
\t \t \t \t <?php endif; ?> 
 

 
\t <div class="container"> 
 
    
 
\t \t <!-- Begin Header--> 
 
\t \t <div class="header"> 
 
\t \t \t <div class="header-inner">

來源

2015-04-22 Lyzarr

不幸目前還沒有答案。我知道要問很多，但我現在試圖讓自己完成兩天而沒有成功。我什至發現另一個問題（http://stackoverflow.com/questions/11816819/put-a-logo-on-twitter-bootstrap-navbar-without-resizing-the-navbar），但不幸的是它沒有工作。我想要達到的目標也可以在這裏看到：http://www.skagosoil.gr/。在此期間，我已將徽標鏈接放回到導航欄容器中...... – Lyzarr

考慮這個佈局：

<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>

這裏的標誌在前，菜單後。由於您的引導版本是2.3.2，因此如果設備的水平分辨率爲480像素及以下，它將使所有列寬度爲100％。添加以下樣式將解決您的列的百分比，無論屏幕分辨率寬度：

.top-menu-row .span3 
{ 
    width: 22% !important; 
    float: left; 
    height: auto;  
} 

.top-menu-row .span9 
{ 
    width: 74% !important; 
    float: right; 
}

，並在媒體查詢設備上刪除absolute定位，將您的徽標貼合在列寬：

@media (max-width: 767px) { 
    a.toplogo { 
     position:relative; 
    } 
}

來源

2015-04-24 09:56:50 Tony

首先非常感謝您再次幫助我！自從我生病以來，我一直無法看到這一點。我放入你提供的代碼，起初一切看起來都很好（謝謝！），但只要你調整瀏覽器窗口的大小，標誌就會變得不可思議。我建立了一個gif來證明這一點：http://www.lyzarr.com/stuff/dancing-logo.gif我檢查了css，如果有什麼可能導致這種情況，但由於我沒有放入任何媒體至於徽標，至今似乎並非如此。 – Lyzarr

非常感謝，現在它工作。最後一點（@media）實際上似乎沒有任何區別，當我評論它？！現在唯一缺少的是自動替換另一個更緊湊的標誌。所以我的意思是一個真正不同的文件，比如「logo_test_sm.png」，它也適用於導航欄的高度。只是通過媒體查詢縮小徽標會使其難以閱讀。大牌更像徽章，小牌只包含徽標本身。 – Lyzarr

當菜單崩潰並顯示漢堡包菜單時，應更換它。（只是爲了澄清） – Lyzarr

徽標位置重疊//的Joomla引導

回答

相關問題