Is it possible to have the logo centered with the menu bar?

I found a cool theme: Check it out here!

Does anyone know how to center the logo and menubar on this template?

<section class="page_toplogo ls s-pt-25 s-pb-20 s-py-md-30">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-12">

                        <div class="d-md-flex justify-content-md-end align-items-md-center">
                            <div class="mr-auto">
                                <div class="d-none d-md-flex justify-content-center justify-content-md-start">
                                    <a href="./" class="logo">
                                        <img src="images/logo.png" alt="">
                                    </a>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </section>

Appreciate any help with this, thank you!

Answer №1

To center the logo, simply delete the mr-auto class from the HTML or adjust the following CSS:

.page_toplogo .mr-auto {
    margin-right: 0 !important;
}

If you wish to also get rid of the items on the right side of the logo, either remove them from the HTML or use display: none to hide them. Additionally, change justify-content-center to justify-content-start in the logo wrapper.

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

Tips on creating a "CSS3 blink animation" using the visibility attribute

I'm attempting to create an old-school blink effect on some DIVs. They should start off as invisible and then quickly become visible for a moment, repeating this sequence in an infinite loop. According to CSS specifications, the "visible" property is ...

Why is the jQuery change event only firing when the page loads?

I am experiencing an issue with a .js file. The change event is only triggering when the page loads, rather than when the selection changes as expected. $(document).ready(function(){ $("#dropdown").on("change keyup", colorizeSelect()).change(); }); f ...

Ways to create a smooth transition in element height without a known fixed target height

Is it possible to create a smooth height transition for an element when the target height is unknown? Replacing height: unset with height: 100px allows the animation to work, but this presents a problem as the height needs to be based on content and may v ...

Having trouble getting my Win and Lose Divs to display in my IF statement within the Card Game

Currently, I am developing a card game where players are presented with a card generated by the computer. The player has to decide whether the next card will be higher, lower, or equal to the current one by clicking corresponding buttons. if ((playerChoic ...

Utilize an Ajax function to call the BOT listening URL within a Web method

My recently developed web application features a submit button that triggers an Ajax call to communicate with the BOT. The code snippet used for the Ajax function is as follows: <script> $(document).ready(function () { $("#btnSend& ...

What is the best way to show the totals on a calculator screen?

As part of my work, I created a calculator to help potential clients determine their potential savings. Everything seems to be working fine, except for the total fees not appearing for all the boxes. I believe I might be missing the correct process to add ...

Hovering over the Laravel Breeze dropdown will activate a dropdown feature

Recently, I've been working on a project with Laravel Breeze and have been utilizing some default components. The dropdown component used in the navigation bar caught my attention. By default, it requires a click for the menu to drop down below. Howev ...

Utilize multiple background images in CSS with a set of three unique images

I have inserted three images into the background of my website's body. Two of them are displaying correctly (one with repeat-y), but the third one is not working. I've tried searching a lot but couldn't find a solution. body { backgr ...

Tips on creating a line break within a text box

There is a gap between the text boxesIn the first row, I used text boxes with labels. When I use a text box with a label, the text box is attached to the text box in the first row. I tried using a break line but in mobile view, there is a gap showing be ...

HTML validation produces mistakes

I encountered an issue when using Google Fonts and received the following error related to a specific link: <link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Montserrat:700|Mer ...

What is the accurate Scrapy XPath for identifying <p> elements that are mistakenly nested within <h> tags?

I am currently in the process of setting up my initial Scrapy Spider, and I'm encountering some challenges with utilizing xpath to extract specific elements. My focus lies on (which is a Chinese website akin to Box Office Mojo). Extracting the Chine ...

Customizing CSS to override Semantic React UI styles

Is there a way to customize the default Header provided by react semantic UI? Currently, I have placed my Header within a div so that I can apply custom styles. <div className="portfolioTitle"> <Header as="h1">Check out this amazing ...

I am currently working with CakePHP and am interested in learning how to expire the admin session

I'm having issues with the code in my UserController. When I open the admin panel in two tabs within the same browser and log out from one tab, I am unable to redirect to the login page from the other tab when clicking on any menu. function beforeFil ...

What is the best method to adjust the width of the <option> tag within the <select> tag using CSS?

<!DOCTYPE html> <html> <head> <title>Page Title</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="s ...

Having trouble placing the flash element above the HTML?

Despite my efforts to use SWFObject to embed a swf file on my webpage, it seems that the flash movie is covering some of the HTML components. Strangely enough, the HTML elements are bleeding through and appearing on top of the flash content. I've tri ...

Access the original source code using jQuery

Is there a way to retrieve the raw HTML code (as seen in Chrome's source code window) using JQuery without having quotes converted to &quot or HTML symbols converted to text? I have tried using html() and text(), but neither method seemed to give ...

I am having issues with the external CSS and JS files not functioning properly in my project

I'm currently working on a project that has the following file structure: However, I am facing issues with loading my CSS and JS files... <link rel="stylesheet" href="./css/main.css"> <script src="./js/main.js" ...

Modify the width of the <nz-date-picker> component from Ng-Zorro

Currently using Ng-Zorro for my template styling and working on implementing a date picker that I want to align perfectly with the dropdown menu above it. I would like to adjust the width of the date-picker manually within the template, but after visiting ...

Is there a way to enable Fancybox to change to the adjacent gallery by simply using the 'up' or 'down' arrow keys?

I am currently working on a layout that consists of a vertical column of thumbnail images, each linked to its own gallery with additional images. When the user clicks on a thumbnail image, Fancybox opens, allowing them to navigate through the images within ...

Create another div for the remaining vertical space occupied by the sibling div?

I currently have 3 different divs nested within each other: <div class="a"> <div class="b"> </div> <div class="c"> </div> </div> Here is the current CSS styling applied to these divs: .a { hei ...