Shaun Reed Shaun Reed - 1 year ago 34
PHP Question

Can't click buttons on webpage unless browser is maximized

I've never seen this happen before, and I've no idea where to start looking for problems.
I'll start by saying I'm an avid user of this site, among others like it, and I am well aware there are possibly others that have ran into this EXACT issue, but the proper phrasing must've escaped me because I searched all of my resources and couldn't find any information even slightly regarding this problem.

I wanted to make two radio buttons, at the top of my page, to switch between a blog and resume. I've gotten SO CLOSE to what I want, the only issue I'm having is the radio buttons are utterly unresponsive unless my browser is full screen. No hover style change, can't click them, nothing. They might as well be plain text with a background color.

<!-- Main Navigation -->
<nav class="site-nav">
<?php if(is_home() ) {
echo '<a class="white-link" href="#"><button type="button" class="btn btn-primary" >Blog</button></a>';
} else if(is_page( 'Work History' )) {

echo '<div class="btn-group">
<button class="btn btn-primary">
<input type="radio" onclick="window.location=\'#\';">Blog
<button class="btn btn-primary active">
<input type="radio">Resume
} else {
echo '<div class="btn-group">
<button class="btn btn-primary">
<input type="radio" onclick="window.location=\'\';">Blog
<button class="btn btn-primary">
<input type="radio" onclick="window.location=\'',
esc_url(get_permalink( get_page_by_title('Work History'))),
} ?>

This is a WordPress theme, I am new to code (within the past year), If I failed to provide correct or enough information please ask me and I will edit this post, and I am using bootstrap.

I have tried to switch to using Buttons instead of a radio selector, and still the same problem occurs.

I really appreciate ANY help on this, if this topic is closed with a simple link to another I apologize in advance, It's been months since I've resorted to asking a question on any forum, as I am usually able to research it on my own, there's plenty of information out there.

Not enough though, apparently ^.^

I removed the direct links and replaced them with '#' to lessen the code for this post.

Full Header.php code:

Answer Source

The buttons become clickable if I add some z-index to their top-level parent container.

/* Target the first div which has a sibling from the first row within .container-fluid */

.container-fluid > .row:first-of-type > div:not(:only-child) {
  z-index: 1;