"Aligning the logo and navbar links to appear on the same line

I'm looking to align the logo and the navigation bar links on the same line. The logo should be displayed alone when viewed on a mobile device.

Here's how it currently appears: Currently shown on two lines.

This is the HTML code for it:

    <!-- header Area Start-->
    <div class="header-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-2 col-md-3 col-12">
                    <div class="logo">
                        <a href="index-2.html">
                            <img src="assets/img/logo.png" alt="">
                        </a>
                    </div>
                </div>
                <div class="col-lg-10 text-right col-md-9 col-12">
                    <div class="responsive_menu"></div>
                    <div class="mainmenu-area">
                        <ul id="nav">
                            <li><a href="index-2.html">Home <i class="fa fa-angle-down"></i></a>
                                <ul class = "drop-menu">
                                    <li><a href="index-2.html">Rocket Home</a> </li>
                                    <li><a href="Gradient.html">Gradient Home</a> </li>
                                </ul>
                            </li>
                            <li><a href="domain.html">Domain</a></li>
                            <li><a href="hosting.html">Hosting <i class="fa fa-angle-down"></i></a>
                                <ul class="drop-menu">
                                    <li><a href="hosting.html">Hosting</a> </li>
                                    <li><a href="Team.html">Team</a> </li>
                                    <li><a href="about.html">About us</a></li>
                                    <li><a href="Testimonial.html">Testimonial</a></li>
                                    <li><a href="faq.html">FAQ</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Pages <i class="fa fa-angle-down"></i></a>
                                <ul class="drop-menu">
                                    <li><a href="Team.html">Team</a> </li>
                                    <li><a href="about.html">About us</a></li>
                                    <li><a href="Testimonial.html">Testimonial</a></li>
                                    <li><a href="faq.html">FAQ</a></li>
                                    <li><a href="service.html">Service</a></li>
                                    <li><a href="blog-details.html">Blog Details</a></li>
                                    <li><a href="404.html">404 Page</a></li>
                                    <li><a href="coming-soon.html">Coming Soon</a></li>
                                </ul>
                            </li>
                            <li><a href="blog.html">Blog</a></li>
                            <li><a href="support.html">Support</a></li>
                        </ul>
                    </div>
                    <div class="search">
                        <span class="search-trigger"><i class="fa fa-search"></i></span>
                        <div class = "search-box">
                            <form action="#">
                                <input type="text" name="s" placeholder="Search..">
                                <div class="submit-btn">
                                    <input type="submit" value="Go">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- header Area end-->

Could you provide any recommendations on how I can accomplish this one-line layout?

Answer №1

Bootstrap allows for a maximum column size of 12. It automatically includes padding and margin, so when using col-lg-8, you may notice the difference in layout.

<div class="header-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-2 col-md-3">
                    <div class="logo">
                        <a href="index-2.html">
                            <img src="assets/img/logo.png" alt="">
                        </a>
                    </div>
                </div>
                <div class="col-lg-8 text-right col-md-9">
                    <div class="responsive_menu"></div>
                    <div class="mainmenu-area">

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

Showing a div above another div without relying on z-index

I have designed custom drop down menus that consist of one <div> containing the current value and functioning as a <select> field, with another <div> below it that appears when the top one is clicked, displaying all the <option> val ...

Enhance your website with a multi-column Pure CSS drop-down menu

Can anyone help me with this issue I'm facing? I am struggling to add a second column to the main "Authorized Brands" menu, and when I tried to break it up, it affected the rest of the columns due to the width being set at 1000px. This is the code I ...

When you hit the enter key in a text input field in JavaScript, it triggers a specific function

http://codepen.io/abdulahhamzic/pen/YqMQwB Is there a way to make it so that when I hit the enter key on a text input, it triggers a specific function? I attempted to achieve this using the following code: <input type="text" onkeypress=" ...

Using a jQuery UI dialog for multiple checkbox selection. The post array cannot be saved for a multi-select until the dialog is opened

CSS <td class="cell"> <a class="opener" id="opener_'.$iterator.'" href="#" rel="#type_dialog_<?= $iterator; ?>">Click here</a> <div id="type_dialog_<?= $iterator; ?>" name="t ...

Adding border color and width to an ion-avatar element can be achieved by using CSS properties

I've been struggling to add a border color and width to an ion-avatar element in Ionic 4. I've attempted to use various CSS3 code snippets, but nothing seems to work. This is what I have tried: .ion-avatar img{ width: 90px !important; h ...

Design interactive elements such as buttons and input fields inspired by the layout of Google websites

Does anyone know how to achieve the sleek, lightweight buttons and text boxes seen on Google's web pages like Google Search, Google Plus, and Google Play? I am currently using JSP and CSS, but I am open to incorporating jQuery if necessary. Any help w ...

Building a matrix of checkboxes

I am looking to design a grid of checkboxes that are displayed in columns, with 5 checkboxes in each column. <ul class="checkbox-grid"> <li><input type="checkbox" name="text1" value="value1" /><label for="text1">Text 1</lab ...

Using Python and Selenium to Scroll Down the Page (with Two Separate Scrollbars)

I need help scrolling down the conversation section on Facebook Messenger. There are 2 scroll bars on the page, and I specifically want to scroll down scroll bar number 1 (see image) Click this link to access the page (make sure you are logged in and hav ...

Ways to alter the color of individual pseudo elements using a CSS loop

While working on creating a typewriter animation effect for my website using only CSS that I discovered through some online research, a question popped into my mind - is it possible to set different colors for each text in the animation? I have included t ...

Conceal table rows with JQuery in html

I need assistance in hiding a row in an HTML Table that contains a value of 0.00 in the third column. I've attempted using JQuery and CSS, but so far no success. Below is the code snippet: <%@ page language="java" contentType="text/html; charset= ...

Using regex in javascript to strip HTML tags

I'm trying to clean up my document by removing all HTML tags except for <a>, <img>, and <iframe> using the following code: var regex = "<(?!a )(?!img )(?!iframe )([\s\S]*?)>"; var temp; while (source.match(regex)) { ...

Struggling with creating a CSS navigation bar, having issues with hover functionality

I have a question about the navigation menu I created using CSS. I have included a sub-menu that appears when hovering over the main menu item, along with a triangle created with CSS placed underneath the menu. You can view the sample code here: http://js ...

The hamburger icon seems to be frozen and unresponsive

I'm struggling to get my hamburger icon to reveal the navigation bar when clicked. The icon itself functions properly and adapts to different screen sizes, but the overlay remains stationary. Check out my code on JSFiddle! <html> <head> ...

Tips for breaking out of an infinite loop while loading HTML containing a carousel into a blank <div> within another HTML file using jQuery's $(document).ready() function

Currently, I am studying HTML, CSS, Bootstrap 4, jQuery3, and JavaScript (ES6+), and to enhance my skills, I have devised an exercise for practice and consolidation. I have created 4 HTML files, all featuring responsive design based on Bootstrap 4: inde ...

As the screen size shrinks, two components merge together

One issue I'm facing with my site is the component called NavPanel. This consists of two components - a back button (BackToButton) and a search field (SearchTextField). Everything looks fine on a standard screen size, but when the screen size decrease ...

Utilizing jQuery to pinpoint the exact position within a Flexbox container

I have a unique setup with multiple boxes arranged using Flexbox as the container and list tags as individual boxes inside. These boxes are responsive and change position as the width is resized. My goal is to use jQuery to detect which boxes are touching ...

Eliminating empty space within my container

I am facing an issue with a container that contains an image and a button on top of it. There seems to be some extra space created within the container on the right side which is taking up more space than necessary. The layout consists of three horizontal ...

Mobile devices not responding to media queries properly

My website has different sets of CSS styles for various screen sizes: (1) @media only screen and (max-width: 566px) { (2) @media only screen and (min-width: 567px) and (max-width: 767px) { (3) @media only screen and (min-width: 768px) and (max-width: 999 ...

Running Javascript based on the output of PHP code

I have been working on my code with test.php that should trigger some Javascript when my PHP code, conditional.php, detects input and submits it. However, instead of executing the expected "Do Something in Javascript," it outputs "Not empty" instead. I fin ...

Angular 6 Calendar Template issues with parsing: Unable to link to 'view' as it is not recognized as a valid property of 'div'

I am in the process of developing an application that utilizes this angular calendar. My tech stack includes Angular 6 with AngularFire2 and Firebase. Below is my app.module.ts file: import { BrowserModule } from '@angular/platform-browser'; imp ...