I've been experimenting with Bootstrap to customize a navbar to my liking. I'm having trouble getting everything vertically centered properly in this menu, as you can see in my code. I've made some okay adjustments by tweaking the margin, but I just can't seem to get the button centered. I'm confident that there's a simple solution using position:relative to center everything, but I just can't figure it out.
http://codepen.io/anon/pen/yMGEZb
Thank you for your assistance!
Check out the updated codepen here
If you want to add a button inside the navbar-right li, you don't need to change your CSS.
Here's an example snippet:
.navbar-default .navbar-header .navbar-brand {
font-family: 'Catamaran', 'Helvetica', 'Arial', 'sans-serif';
font-weight: 200;
letter-spacing: 1px;
color: #fdcc52;
}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
color: #fcbd20;
}
... (CSS code continues)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container" style="height:80px;">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top">
<img src="http://svgshare.com/i/17J.svg" width="220" height="50" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" style="margin-top:20px;">
<li>
<a class="page-scroll" href="#download">Download</a>
</li>
<li>
<a class="page-scroll" href="#features">Features</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
<li><button class="button-nav pull-right">Get started</button></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>Seeking assistance in displaying a paragraph with text and a textbox when a specific option is selected from the dropdown menu on my form. Previously used code for radio buttons, but encountering issues with this scenario. Any guidance would be greatly app ...
How can I prevent the text on a Bootstrap 5 button with horizontally and vertically centered text, along with a right aligned icon, from overlapping when it wraps? Additionally, how do I ensure that the icon stays vertically centered when the button text w ...
I'm currently developing a web application using Angular2, and I find myself in need of displaying, but making it non-clickable, an <a> element within my HTML. Can anyone guide me on the correct approach to achieve this? Update: Please take no ...
Let me pose a question, and while the answer may be "no", it never hurts to inquire... I am in need of taking in formatted text as HTML markup and later displaying the HTML to showcase the formatted text. This is an extremely common situation. Even popula ...
I'm experiencing an issue where the pointer property is working, but the fill property isn't having any effect. When I inspect the elements in the browser console, I can manually change the element.style to affect the styling of the SVG component ...
Edit : I am aware that their is a question mark in the jQuery, CSS and HTML. Due to it being generated automatically by Framework I cannot remove it. I'm trying to apply dynamic styling to the input and label elements in my HTML using jQuery. However ...
'<?php $allowedExts = array("jpg", "jpeg", "gif", "png"); $extension = end(explode(".", $_FILES["file"]["name"])); if ((($_FILES["file"]["type"] == "image/gif") || ($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] == "image/ ...
Currently, I am utilizing the jQuery-ui.css (smoothness) solely for the calendar CSS. Can anyone provide me with a comprehensive list of all the calendar CSS functions available in it? I'm looking to avoid using any unnecessary CSS that might be causi ...
I need help troubleshooting why my buttons are not appearing in the scrollbar on macOS. They function properly on Windows, so I suspect there may be a typo or error in my code. Can anyone take a look and provide some insight? ::-webkit-scrollbar { wid ...
I'm looking to overlay some divs on top of Amazon.com ads, similar to the image above. This is part of a personal project where I need to position these divs precisely over the ads. To achieve this effect, I've been using getBoundingClientRect t ...
I am working on a webpage that includes an html select element <pre> $query = mysql_query("select * from results"); echo "<select id='date' onchange='showdata()' class='form-control'>"; while ($arr = mysql_fetch_a ...
Currently diving into PHP and working on a login/register page in localhost using XAMPP on my Mac. I'm encountering an issue with the following error message: Warning: mysqli_connect(): (HY000/2002): Connection refused in /opt/lampp/htdocs/website/ ...
I am having difficulty creating an image grid with consistent spacing between columns, like shown in the image below: https://i.sstatic.net/azsxa.jpg The issue I am facing is aligning the right margin (red line), as illustrated below: https://i.sstatic. ...
Is there a way to watch all sass directories and generate CSS files to the corresponding 'CSS' folder, including subdirectories? The current method involves listing each directory separately in the NPM script. "scripts": { "sas ...
Can anyone explain why I need to include display: block when my canvas is full page? Without it, the canvas size appears larger even though the width and height values are the same. Appreciate any insights. Thanks! ...
As part of my program, I have to generate hyperlinks for each row in a MySQL table. To accomplish this, I used the C MYSQL API to fetch the data from the table: while ((row = mysql_fetch_row(result))) { ....//some code to print the data.... } I am ab ...
<div style="position: relative; left: 50px; top: 30px; width: 300px; height: 150px; background: #222222;" onmouseenter="this.style.background='#aaaaaa'" onmouseleave="this.style.background='#222222';"></div> http://jsfiddle ...
I'm struggling to create a smooth fade-in effect word by word without causing the first word to suddenly jump to the left when the second word appears. To better explain my issue, I've provided a jsfiddle link: http://jsfiddle.net/6czap/504/ If ...
I'm attempting to alter the appearance of a button within my Wordpress site, but I've hit a roadblock in identifying the correct element to modify. So far, I've tried targeting: .input#chained-quiz-action-1, however, the button stubbornly re ...
Below is the code I have created. It consists of a text-input field and a 'Search' button within a form. Upon clicking the search button (submitting the form), it should trigger the .submit function to carry out the necessary processing. HTML CO ...