On the following demo (http://bootsnipp.com/snippets/GXb7V) we have this line of markup:
<a class="navbar-brand" href="#">Brand</a>
Regardless of whether the href is changed to a URL or even left as the # it is not possible to click on this link.
Does anyone know how to fix this?
I believe the issue may be something to do with the search form and the way it expands to be full width of the nav (see bootsnipp for an example). I have also read a post here (Link isn't clickable within my navbar on Bootstrap 2 page) which discusses a clearfix class but that hasn't helped in this case.
Its likely because there is another element on top of it. You can fix it by changing its z-index.
a.navbar-brand {
position: relative;
z-index: 1;
}
Related
I'm creating a landing page for a fictitious hat company and trying to add a "Read More" link (p within an a) and it ends up in a fixed position and I'm unable to move it using anything I know, and it also creates an odd height at the bottom of the page. I've been trying to solve this for about 30 minutes now and I don't know what I did wrong. I'm sorry if the question is phrased weirdly, here's my html and css.
https://codepen.io/youssefwael/full/KKzVgxe
The part ruining my page is in line 38;
<a href="#" id="read-more">
<p>Read More <i class="fa fa-chevron-down"></i></p>
</a>
Thanks in advance.
That's because <a> tag is a inline element.
You have to add
#read-more {
display: inline-block;
margin or padding or some code...
}
or
display: block; margin-top: ? like this
you can see the code here:
codepen
I am having trouble with two buttons at the top of my mobile site
www.thefriendlydentist.ie
They are clickable on desktop but on mobile I get no response?
The html is placed in the header of the WP theme.
<div id="topcontact-2" style="background-color:white;">
<p style="background-color:white;padding:none;"class="call-button" id="call-button"> CALL US </p>
<p style="background-color:white;padding:none;" class="call-button" id="email-button"> EMAIL US </p>
</div>
You need check your all elements (divs) properly, I strongly suggest you using mobile device toolbar on Chrome or Mozilla.
If you look on desktop browser using by mobile device toolbar, you will see the some elements overlapping the all page. So your buttons that you want to click stay behind of those elements.
- Option 1: remove overlapping elements
- Option 2: use z-index to manage them.
<div class="mobile-bg-fix-img-wrap">
<div class="mobile-bg-fix-img" style="/* width: 375px; *//* height: 767px; */"></div>
</div>
You can see in image how above elements fill the page.
How Z-Index Works?
All of us are quite comfortable set some x (left:10px) and y (top:10px) values to elements by using CSS but not for z-index. Z-index property defines the level of an HTML element on the screen. Let's check the elements below.
In brief, z-index will define the closeness of the elements to the user. In this sample you can assign elements like below:
red square z-index:10
blue circle z-index:56
white square z-index:985
in this order, nothing will change. In this case, we know that z-index is relative. Another important thing, we need to know about z-index, it will only work on an element whose position property has been explicitly set to absolute, fixed, or relative
To deep dive, please check the z-index documentation.
How to Activate Mobile Toolbar on Chrome?
Mobile toolbar shows how your elements are placed in a mobile browser. Using this tool, you can detect almost everything you would expect to see in a mobile browser. You can also inspect and alter your CSS codes easily.
Below image will guide you to how to activate mobile toolbar on Google Chrome.
Other Possibilites For The Problem
1. Javascript Blocking
Using javascript, you can override original behavior of an HTML element. Check below code, this will prevent the real action of the <a> element.
Non-clickable Link
Using JQuery
<script>
$(".prevent-click").click(function(){
return false;
})
</script>
Using Javascript
document.getElementsByClassName("prevent-click")[0].addEventListener('click', function (event) {
event.preventDefault();
return false;
});
Please check your codes carefully, is there any Javascript code to prevent the original action of HTML elements. In addition, to check this quickly, you can disable all javascript codes on Chrome by following steps below.
Open Developer Console
Go to Settings - right top corner of the inspection tool
Check the box (Disable Javascript)
Refresh the page.
Please go in to your CSS and make this change.
.mobile-bg-fix-wrap .mobile-bg-fix-img {
position: absolute;
width: 100%;
height: 125%;
left: 0;
top: 0;
background-size: cover;
}
To:
.mobile-bg-fix-wrap .mobile-bg-fix-img {
position: absolute;
width: 100%;
height: 125%;
background-size: cover;
}
The top and left set to 0 was overlapping the two buttons causing it that you could not click on them.
HTML links not clickable on mobile, but are clickable on desktop.
I have one solution. Try this
Html
<a href="https://www.stackoverflow.com" class="goclick">
css
.goclick{
position: relative;
z-index: 9;
}
For this, go to Google Chrome > Developer tools.
Inspect the element, if it is being overlapped by anything, add clear: both;
to the overlapping element.
Actually, in my issue, it fixed everything.
for me, i had a class with...
z-index: -1
which was forcing the parent <div> to the back. changing this to 0 or simply removing it, solved the problem
ref: https://www.sitepoint.com/community/t/solved-href-not-working/248882/6
I am looking for a solution without javascript, where I can use an link like this:
<a href='#link1 +60px'>
This is just an example for easier understanding. So what I am trying is, that I got an anchor in my website, and the link goes to that specific point + 60px further.
So far the following is the best method I could find to position the landing position w/o javascript
HTML (add an additional anchor tag)
<!-- Actual going to here -->
<a id="anchorpoint" class="anchor"></a>
<!-- Display point -->
<div>Some content here</div>
CSS
.anchor {
display:block;
padding-top:60px;
margin-top:-60px;
}
It's a slight modification of Fixed position navbar obscures anchors. The advantage lies there, that you don't prepopulate padding and margin of the actual container.
Try: https://jsfiddle.net/q6yvuhao/
This is impossible.
Your only options are JavaScript and linking explicitly to a spot (with its own ID) above where you want to link to.
Is the anchor point invisible? If so, add a class to the link and the following CSS:
a.link {
position:relative;
top:60px;
}
<a class="link" href='#link1'>
Today I encountered a weird experience in my site LiveGreen
When I hover on the Menu Services, the dropdown goes underneath the image section below that. I tried every possible way like positioning and z-index ing and all kind, and googled a lot, am not bad with HTML and CSS still, it is testing me.
This theme is purchased, so cant post the code. you can check it from the website itself.
Please Help me.
Remove the z-index property on your .main class.
.main {
z-index: 1; /* this is causing your problems */
}
It's fairly difficult to pull off because there are so few unique classes to key off of. The root cause of the issue for you is that the element with a z-index that is higher than your menu applies that z-index higher up the DOM tree which makes it render on top. The best I could come up with is to apply the following, provided that the #aq-block-8801-5 block is always and will always be the nav menu container.
#aq-block-8801-5 {
position: relative;
z-index: 2;
}
I'm new to jQuery and to mobile applications in general.
I have an annoying problem with a jQuery theme called nativeDroid.
After adding forms to my page, whenever I click on the form (regular input or textarea) the
header and footer changes their location and stretches the page width.
It seems that when clicking on the text filed, another class is added to the header div.
the class name is .ui-fixed-hidden.
I viewed an identical question here but the solution isn't working for me.
I tried changing the .ui-fixed-hidden class so that it matches the solution given but the
problem remains the same. If any one can help me I would really appreciate it since it will
be a shame to give up such a great looking theme like this one.
I can't post any images yet but the problem looks identical to the one in the post I added.
Can anyone please help me out?
I am using PrimeFaces 5.0 final release, which means I am using jQuery Mobile 1.4.2.
I added data-tap-toggle="false" as recommended here (and in many other questions here on stackoverflow), but that did not solve my issue.
<div data-role="header" data-position="fixed" data-tap-toggle="false">
So, I also added the following, and this fixes my issue.
.ui-header.ui-fixed-hidden {
position: fixed !important;
}
Add data-tap-toggle="false"
For example, i used in this header, and worked for me:
<div data-role="header" data-position="fixed" style="height:87px" data-tap-toggle="false">
Home
<h3>Contact</h3>
<img src="objetos/logo_48.jpg" class="ui-btn-right logoHeader"/>
</div>
This has to do with the tap toggle function. When you click on the page, we set position: absolute; instead of fixed for the toolbars. You will notice this behaviour on this page that has more content: http://jsbin.com/erezak/25
So removing/adding that class is on purpose. If you don't want this you can set data-tap-toggle="false".
The problem is that we pull fixed footers 1px down to fix a 1px gap issue on Android. We also set 1px padding-bottom to keep the same visual height.
This is causing the text to jump 1px when we switch to position: absolute; on a short page (no scroll)
Other issue is that the border is not visible with position: fixed;, but becomes visible with position: absolute;
Ref: https://forum.jquery.com/topic/ui-fixed-hidden-on-click-event-1-1-rc2