Note that there are some explanatory texts on larger screens.

plurals
  1. POBootstrap navbar - can only click the padding(?) of an image within <a> tag
    primarykey
    data
    text
    <p>I have created a page using Twitter's Bootstrap framework; the problem is with the navbar. </p> <p>I have 2 logos, each image is nested in an anchor tag. When the navbar is collapsed, the links work just fine, but when it is expanded (in the desktop resolution), you can't click on the image; looking at the elements in the inspector, it seems like what's happening is that the image is somehow sitting "on top" of the anchor tag, so that you can click in the padding around the image, but not on the image itself.</p> <p>Here is my code:</p> <pre><code> &lt;div class="navbar navbar-inverse navbar-static-top"&gt; &lt;div class="navbar-inner"&gt; &lt;div class="container"&gt; &lt;!-- .btn-navbar is used as the toggle for collapsed navbar content --&gt; &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;/a&gt; &lt;!-- Be sure to leave the brand out there if you want it shown --&gt; &lt;a class="brand" style="padding:0px;" href="&lt;?=getRequestProtocol()?&gt;://&lt;? echo curHost(); ?&gt;"&gt;&lt;img src="/images/HailStrikeGraphics/hs_header_logo_black.png" width="190px" /&gt;&lt;/a&gt; &lt;a class="brand" style="padding:0px;" href="http://www.stormdamagecenter.org"&gt;&lt;img src="/images/nsdc_coin.png" /&gt;&lt;/a&gt; &lt;!-- Everything you want hidden at 940px or less, place within here --&gt; &lt;div class="nav-collapse collapse"&gt; &lt;div class="nav-inner-wrapper"&gt; ... &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>As this is my first post, I can't post screenshots, but you can see what I'm talking about here: <a href="http://www.hailstrike.com" rel="nofollow">hailstrike.com</a></p> <p>This is clearly the result of some strange behavior with the way bootstrap is handling the resopnsive css, but I've been scouring the boards for a while, and haven't found a solution for this. Honestly I'm a bit stumped.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload