Tips for aligning a website logo and header vertically with the navbar

I'm having trouble aligning the navbar vertically with my website logo and header. I've tried using display: inline-block; and vertical-align: middle; on the , , and tags within the same div at the top of my website, but it ends up switching from a horizontal to vertical layout, which is not what I want. I am also utilizing Bootstrap 4.

Below is my HTML code:

<div id="home">
    <div class="page-header">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <img src="images/test-logo.png">
                    <h1>Rigid Signs</h1>
                </div>
                <div class="col-md-8">
                    <ul class="nav">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

And here is the corresponding CSS:

#home {
    background: url('../images/workshop-testphoto.jpg') no-repeat center / cover;
    height: 844px;
}

.page-header {
    background: rgba(0,0,0,.6);
    position: fixed;/*not working*/
    padding: 11px 0;
}

.page-header img, .page-header h1 {
    display: inline-block;
    vertical-align: middle;
}

.page-header img {
    width: 88px;
}

.page-header h1 {
    font-size: 32px;
    color: white;
    margin-left: 11px;
}

.page-header .nav {
    float: right;
}

.page-header .nav li a {
    display: inline-block;
    font-size: 22px;
    text-decoration: none;
    color: #fff;
}

I am still learning how to use Bootstrap 4 effectively, so if anyone has suggestions on how to achieve vertical alignment of all elements in my navbar using Bootstrap 4, I would greatly appreciate your help!

Answer №1

It appears that the bootstrap grid system uses "float" styling, causing col-md-4 and col-md-8 to float left. Instead of using float, consider using inline-block and apply vertical-align middle to both div elements. With the current HTML provided, the updated CSS would look like:

.row {
    font-size: 0; /*to remove blank space between two inline-block element*/
}

.col-md-4, .col-md-8 {
    float: none;
    display: inline-block;
    vertical-align: middle
} 

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Two tables are positioned using distinct alignments but share a common stylesheet

I have created two tables, one using HTML (with a touch of PHP) and the other with two PHP loops. Starting with the stylesheet: .statistics { font-family: Arial, monospace; font-size: 36px; margin-left: 5%; width: 90%; } .statistics tr { ...

Real-time preview of a text field in JavaScript

I'm attempting to create a similar piece of code like the one at the bottom of this page for leaving comments. I have the basic code, but the result doesn't display new lines (or HTML, although that's not essential). I have the function belo ...

In order to display the particle-slider logo effect, the JavaScript on the page needs to be refreshed

I have a website frontend integrated from WordPress using an HTML 5 Blank Child Theme. The site features a logo effect utilizing particle slider for screen sizes greater than 960px, and a flat logo image for screen sizes less than 960px. Everything works p ...

Show a clear box over an HTML table row upon mouseover, without highlighting the row

I'm looking to implement a transparent box, with a button, that surrounds a table row when the user hovers over it. I've searched on Google but all the pages only talk about how to highlight rows on hover. I am currently using JavaScript to add ...

Tips for Including a Parallax Image Within a Parallax Section

Currently, I am working on implementing a parallax effect that involves having one image nested inside another, both of which will move at different speeds. My progress has been somewhat successful, however, the effect seems to only work on screens narrowe ...

How come the values keep appearing without any loops or subsequent calls being made to the PHP file?

Here is a demo example showcasing 'Server Sent Events(SSE)': Embed HTML code(index.html) : <!DOCTYPE html> <html> <body> <h1>Receiving server updates</h1> <div id="result"></div> <script> if(type ...

Step-by-step guide to dynamically updating array indexes using jQuery and HTML input fields

const list = []; function updateIndex(index) { list.splice(index, 1); console.log(list); var html = ""; html += "<ul id = 'del'>"; for (var i = 0; i < list.length; i++) { html += "<li>" + list[i] + " <button oncl ...

The menu will showcase all currently active sub-category items whenever an item below is selected (using Joomla/Mosets Tree)

I am currently managing a Joomla website that utilizes Mosets Tree for a business directory. One issue I have noticed is that on the right side of the site, all the categories are listed. When you expand sub-categories and then roll over to another menu it ...

To prevent the page focus from shifting, make sure to force click on a blank link

My question involves an empty link: <a href="#" id="stop-point-btn">+ add stop-point</a> This link is connected to a JavaScript function: $("#stop-point-btn").bind("click", addStopPoint); The JS function simply inserts content into a specif ...

What is the process for retrieving the API configuration for my admin website to incorporate into the Signin Page?

My admin website has a configuration set up that dynamically updates changes made, including the API. However, I want to avoid hardcoding the base URL for flexibility. How can I achieve this? Please see my admin page with the config settings: https://i.st ...

Struggling with implementing a grid layout using CSS

I am currently facing an issue with my code where I am attempting to set up a wrapper element as a grid. However, upon inspecting the page, I am receiving notifications that my inputs for display, grid-template-columns, and grid-template-area are considere ...

Is XPath applicable to data that has been labeled?

I am looking to access the data within the second div: <div class="my-3"> <div class="d-flex justify-content-between">Monthly:</div> <div>0 / 30,000</div> </div> Within the code above, I want to t ...

Can you place 4 table cells in the first row and 3 table cells in the second row?

Exploring the world of HTML and CSS designs for the first time. Here's a code snippet I've been working on: <html> <body> <table width="100%"> <tr> <td width="25%">&#160;</td> ...

"Using jQuery's animate() function to dynamically change text content

I'm currently venturing into the world of jQuery animate() and decided to create a presentation-style project for practice. However, I've hit a roadblock when attempting to alter the text within my div element in the midst of an animation utilizi ...

A guide on using Xpath to compare content between two tags

I am facing the following scenarios with $html contents. I am trying to determine if the html content starts with a media element (such as an image, video, or iframe) without any text content, similar to the third scenario below. //no contetn between firs ...

The minified version of Bootstrap's CSS will only be loaded when I explicitly import it in my index

I used to rely on BootstrapCDN for my styles, but now I want to download the files and use them locally. However, when I try to load the styles without an internet connection, they don't seem to work properly, especially the grid layout. My current s ...

BS grid malfunctioning in a non-uniform manner

When a division in the advantage grid is clicked, the card body of another division collapses. However, this does not occur in the disadvantage grid. Clicking on one section in the disadvantage grid does not collapse another section as it does in the advan ...

Obtain the data from a different HTML element

When a user clicks on a button, I want to send the value of an input element in Angular2. What would be the most effective approach for achieving this? <input type="text" class="form-control" placeholder="Search for images..." /> <span class="i ...

Troubleshooting Problems with CSS `transform` in JQuery UI's `Slide` Transition

While implementing JQueryUI's slide transition on an element with a CSS transform, I encountered an issue where the top half of the element gets hidden during the animation. Is there a way to tweak either my JQueryUI animation or CSS to avoid this pro ...

CSS Menu Not Functioning Properly on iPad While Scrolling is Required

My CSS dropdown menu has mouseout and mouseover events but I'm experiencing issues on iPads and iPhones. The menu automatically closes when scrolling, making it difficult to open any links unless the menu is short enough to avoid scrolling. Does anyon ...