Hello everyone! I am currently learning how to use bootstrap/CSS as I work on designing a website for one of my courses.
Check out the Heroku app here
At the moment, I have successfully created my header. It includes some buttons wrapped in <a> tags within divs and containers.
When using the inspector tool, it shows that the <a> tags are being targeted instead of the actual buttons. I adjusted the size of the <a> tags to match the buttons for better clickability.
I recently attempted to revamp the header by following the Bootstrap docs and implemented a jQuery script:
$(function() {
$('button').click( function() {
$(this).addClass('active').siblings().removeClass('active');
});
});
This script changed the style to a white background when activated, but unfortunately, this change did not persist after redirection.
Should I consider using :visited and then removing it? I believe that :visited is a property that remains unchanged even after clicking links.
Here is the newly added CSS code that I think could be effective for targeting the path to the <a> tags.
The attributes of the header may not be relevant, but I want to ensure all information is included.
header{
text-align: center;
padding-bottom: 0em;
/* SHOULD THIS WORK? */
.navbar .container .btn-group button.active a{
background-color: white;
}
}
Edit to Header HTML -> The <a> Tags have width: 100%; height: 100%; so I always clicked them instead of the buttons. Didn't know a better way
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<div class="btn-group">
<button type="button "class="btn btn-lg"><%= link_to current_user.name, current_user %></button>
<button type="button" class="btn btn-lg"><%= link_to "Log Out", root_path %></button>
<button type="button" class="btn btn-lg"><%= link_to "New Event", new_event_path %></button>
<button type="button" class="btn btn-lg"><%= link_to "All Events", events_path %></button>
I am aiming for a design similar to the Rift website
Explore Oculus Rift here
Whether you are using Rift/Touch/Oculus Ready Pcs, their formatting differs with bold text and a line underneath. I aspire to replicate this layout for my header but with a white background instead.