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

How can Play framework be used to display static HTML pages with static JavaScript and CSS files?

I'm currently exploring options for rendering or routing to static web apps stored in the Play's public folder. Here is my project structure: myapp + app + conf + modules + public | + webapp1 | + css | + ...

How to Implement Loading Image with CSS

I have customized the CSS code below to style a div element that showcases a responsive image. .my-img-container { position: relative; &:before { display: block; content: " "; background: url("https://lorempixel.com/300/160/") ...

What steps do I need to follow in order to utilize Express Generator to create a node skeleton with an HTML view

Is there a way to create a skeleton for Node.js using Express generator with an HTML view engine? For example, we typically do npm install -g express-generator express -v pug but it seems we cannot create a skeleton for express -v html ...

Can a CSS <div> element have margins applied to it?

Can a margin be defined for a text area? My WYSIWYG editor wraps my text within <div> tags instead of using line breaks <br /> So I was thinking of adding a margin to the <div> tag? Is this possible in CSS? If so, how can it be done? ...

Unique custom CSS and meta tag options for enhancing iPad/iPhone user experience

Currently, I am developing a web application that integrates Extjs components, PHP, and MySQL. My main goal is to ensure that my application looks correct on the iPad. Are there any specific CSS rules or meta tags that I should be implementing for optima ...

Issue with z-index not applying to a fixed header

I've been attempting to recreate the problem using this plunker. .demo-blog.mdl-layout .mdl-layout__content { padding-top: 0px; position: relative; margin-top: -80px; z-index: 100; } header.main-header{ z-index: -50; } My goal is ...

Unique background image is assigned to each div sharing the same class

Seeking a way to assign unique random backgrounds to each div with the .item class. Initially attempted using PHP and CSS, for example: <?php $bg = array('bg1.jpg', 'bg2.jpg', 'bg3.jpg', 'bg4.jpg', 'bg5.jpg ...

Animation Effects in Opera and Internet Explorer

Just unveiled my latest project, CSSload.net - an awesome tool for generating CSS spinners and bars. The animations are running smoothly on Firefox and Webkit browsers. Curious if anyone has tips on animating elements like this in Opera and IE? ...

Which web browsers are compatible with the input attribute "multiple"?

I am currently incorporating this particular plugin, and its file input does not support multiple file selection. To address this issue, I have added the 'multiple' attribute. However, I am curious if there are any browsers or other platforms (su ...

What is the best way to ensure the width of the div is adjusted to fit the table it contains?

What is the best way to adjust the width of a div containing a potentially wider-than-screen table? Despite setting padding: 10px for the div, the right padding disappears when the table exceeds the screen width. Below is an example code snippet: <div ...

Adjust the button's hue upon clicking it

The current function is operational. Upon pressing the button, it toggles between displaying "click me" and "click me again". However, I desire the button to appear blue when showing "click me" and red when displaying "click me again". <!DOCTYPE html ...

Creating a Personalized Tab Layout with react-bootstrap

Incorporating react-bootstrap components and styled components, I have implemented tabs in my project. The current appearance of the tabs is as shown here: https://i.sstatic.net/rPnlO.png However, my requirement is to have the tabs look like this inst ...

CSS: ways to set a maximum height for a datalist container

Hello, I have a datalist with over 100 options and I would like to set a maximum height for it to ensure the design looks tidy. Can anyone please help me out with this? Thank you! <input type="text" list="suggestions" class="f ...

What is the best way to make a dropdown button on a top navigation bar show as active using Semantic-ui?

I searched through the Semantic-ui documentation, but I couldn't find clear instructions on how to designate a dropdown item as 'active' (highlighted without being opened) in my top navbar menu, similar to regular items. The 'active&ap ...

What is the best way to dynamically adjust the height of an iframe based on its changing content

My webpage contains an iframe that loads content dynamically, and I want to center it on the page based on its height. The issue I'm facing is that while my code works well for increasing content heights, it fails to recognize when the content size de ...

CSS Style in Safari does not conceal Div on Tailwind

When switching the screen from desktop to mobile in ReactJS/Tailwind, I have hidden certain images using the following code: <div className="flex shrink flex-row justify-between w-[60%] h-[25%] sm:w-[95%] sm:h-[52%] mb-[-10px] mt-[-15px] lg:mt-0&qu ...

Dynamic background image that fills the entire webpage, adjusts to different screen sizes, and changes randomly

Currently, I am working on designing a web page with a dynamic background image that adjusts responsively in the browser without distortion. The challenge is to randomly select an image from an array using jQuery. Unfortunately, my knowledge of jQuery is ...

Is Flash now irrelevant? What makes HTML5 or CSS3 so powerful?

While I may not consider myself a dedicated Flash Activist, it's hard to ignore the fact that despite its flaws, there are some important uses for it on certain websites. However, with all the buzz around HTML5 and CSS3 being the future of the web, ev ...

What could be causing my webpage content to be partially hidden by my CSS menu?

I am currently working on my website which features a CSS menu with my website logo, a text box, and a dropdown. Additionally, I have created a login form using a table like the one shown below. <p>&nbsp;</p><table width="40%" border="0 ...

What is the best way to retrieve an <a> tag element using Selenium in Python?

I am fairly new to using Selenium and could use some guidance with the following issue. I am attempting to create a birthday bot for Facebook, but navigating through the platform's latest UI has been challenging with JavaScript disabled. I've bee ...