What is the best way to align all menu items horizontally with the logo?

I'm facing a small issue that I can't seem to resolve on my own. I recently added a links menu to the header of my website, and it looks like the menu has fixed dimensions, causing the Login URL to get pushed down due to space constraints. I'd like to align it inline with the logo. I attempted to make adjustments using CSS:

.nav-menu-item-7776.menu-item menu-item-type-post_type menu-item-object-page  
narrow{
margin-top:-150px;
}

The element for the Login URL is nav-menu-item-7776.

However, my changes don't appear to be taking effect. Can anyone assist me with this?

csswordpress

Answer №1

To enhance the icon appearance, modify the icon CSS with the following code:

nav.main_menu>ul>li>a>i {
    margin: 0 8px 0 5px;
    position: absolute;
    top: 38px;
}

Answer №2

Update or Add these styles

.header_bottom .container_inner {
    position: relative;
    display: flex;
}

nav.main_menu.right {
    position: relative;
    left: auto;
    margin-left: auto;
    display: flex;
}

.dark nav.main_menu>ul>li>a {
    display: flex;
       align-items: center;
}

Additionally, eliminate all styles from the logo_wrapper class.

Ensure that the cart remains inside the nav element

<nav class="main_menu drop_down right">
   <ul id="menu-top_menu" class="">
      <li id="nav-menu-item-7687" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home  narrow"><a href="http://3hmarketplace.com/" class=" current "><i class="menu_icon fa blank"></i><span>Home</span><i class="q_menu_arrow fa fa-angle-right"></i></a></li>
      <li id="nav-menu-item-7165" class="menu-item menu-item-type-custom menu-item-object-custom  narrow"><a href="#" class=""><i class="menu_icon fa blank"></i><span>About Us</span><i class="q_menu_arrow fa fa-angle-right"></i></a></li>
      <li id="nav-menu-item-7716" class="menu-item menu-item-type-post_type menu-item-object-page  narrow"><a href="http://3hmarketplace.com/health/" class=""><i class="menu_icon fa blank"></i><span>Health</span><i class="q_menu_arrow fa fa-angle-right"></i></a></li>
      <li id="nav-menu-item-7717" class="menu-item menu-item-type-post_type menu-item-object-page  narrow"><a href="http://3hmarketplace.com/hygiene/" class=""><i class="menu_icon fa blank"></i><span>Hygiene</span><i class="q_menu_arrow fa fa-angle-right"></i></a></li>
      <li id="nav-menu-item-7705" class="menu-item menu-item-type-post_type menu-item-object-page  narrow"><a href="http://3hmarketplace.com/happiness/" class=""><i class="menu_icon fa blank"></i><span>Happiness</span><i class="q_menu_arrow fa fa-angle-right"></i></a></li>
      <li id="nav-menu-item-7723" class="menu-item menu-item-type-post_type menu-item-object-page  narrow"><a href="http://3hmarketplace.com/contact-us/" class=""><i class="menu_icon fa blank"></i><span>Contact Us</span><i class="q_menu_arrow fa fa-angle-right"></i></a></li>
      <li id="nav-menu-item-7776" class="menu-item menu-item-type-post_type menu-item-object-page  narrow"><a href="http://3hmarketplace.com/my-account/" class=""><i class="menu_icon fa fa-user"></i><span>Login</span><i class="q_menu_arrow fa fa-angle-right"></i></a></li>
      <li id="nav-menu-item-7774" class="menu-item menu-item-type-post_type menu-item-object-page  narrow"><a href="http://3hmarketplace.com/shop-product-list/" class=""><i class="menu_icon fa blank"></i><span>Shop</span><i class="q_menu_arrow fa fa-angle-right"></i></a></li>
   </ul>
   <div class="header_inner_right">
      <div class="shopping_cart_outer">
         <div class="shopping_cart_inner">
            <div class="shopping_cart_header">
               <a class="header_cart" href="http://3hmarketplace.com/cart/"><i class="fa fa-shopping-cart"></i></a>
               <div class="shopping_cart_dropdown" style="height: 0px;">
                  <div class="shopping_cart_dropdown_inner">
                     <ul class="cart_list product_list_widget">
                        <li>No products in the cart.</li>
                     </ul>
                  </div>
                  <a href="http://3hmarketplace.com/cart/" class="qbutton view-cart">CART <i class="fa fa-shopping-cart"></i></a>
                  <span class="total">Total:<span><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">AED</span>&nbsp;0.00</span></span></span>
               </div>
            </div>
         </div>
      </div>
      <div class="side_menu_button_wrapper right">
         <div class="side_menu_button"></div>
      </div>
   </div>
</nav>

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

What is the best way to determine the height of a DIV element set to "auto"?

When setting a fixed height on a div using jQuery, such as $('div').height(200);, the value of $('div').height() will always be 200. This remains true even if the content within the div exceeds that height and overflow is hidden. Is th ...

javascriptjquerycssheight

Discovering descendant div elements

I've been conducting some research, but I'm struggling to find a specific answer for this. Here is the HTML code snippet: <div class="collapsingHeader"> <div class="listItemWrapper"> <div class="itemWrapper"> ...

javascriptjquerycss

Enhance your HTML audio player with added timeline functionality

I'm currently working on incorporating an HTML audio player into my project. I've managed to get the play/pause functionality to work, but now I'm stuck on adding a timeline feature. Additionally, I'm not sure how to implement the play/ ...

javascriptjquerycsshtmlaudio

Focus on the image displayed through instafeed.js

Using the Instafeed.js plugin to create a dynamic Instagram feed. Everything is working smoothly, but I'm struggling to center the images being retrieved by Instafeed. Despite trying various methods, I can't seem to get it to display as desired. ...

javascripthtmlcssinstafeedjs

Transition color seamlessly from the left side to the right side upon hover

Here is a simple code snippet for creating a line that changes color on hover: li::after { height: 2px; display: block; background: rgb(195, 195, 195); border-right: 1px white; content: ''; } li:hover:after { position: relative; ...

cssanimationtransition

Use CSS to manipulate the dimensions of an overlay

Looking for a way to ensure that the height of your overlay matches the height of your carousel, even on smaller screen sizes? The HTML code below demonstrates how to combine simple HTML with a Bootstrap carousel featuring three images, along with an overl ...

htmlcssbootstrap-4

What methods can be used to accomplish this effect using CSS and/or Javascript?

Is there a way to achieve the desired effect using just a single line of text and CSS, instead of multiple heading tags and a CSS class like shown in the image below? Current Code : <h2 class="heading">Hi guys, How can i achieve this effect using j ...

javascripthtmlcssnewline

The margin persists despite the usage of the * selector and !important declaration

I'm currently working on a website built upon this template: https://github.com/issaafalkattan/React-Landing-Page-Template My issue arises when trying to remove margins in multiple sections. For instance, I want to eliminate the 'orange' ar ...

javascriptcssreactjs

When the width of the screen is less than 992 pixels, my div will be hidden

I have been working with the bootstrap4 layout, and I noticed that when the screen width is less than 992px, the yellow-div is overlapping the brown-div. Can someone explain why this is happening and suggest a solution? Below is the code snippet: .head ...

htmlcssresponsive-designbootstrap-4

Using the <li> element as the primary container for a series of <li>'s within a <ul> is

For my form requirement, I am utilizing Jotforms. After downloading the code, I am currently in the process of customizing the CSS and HTML to fulfill my design needs. Jotforms uses a set of ul , li for managing its HTML structure. However, I encountered ...

htmlcssjotform

Tips for changing the background color of a dropdown menu when hovering in Zurb Foundation 5

Is there a way to customize the background color when hovering over <a href="#">Find Me</a>? I want the background color to change while hovering, similar to how it appears in the image before hovering. And this is how it looks after hovering: ...

csshtmlzurb-foundation-5

Issues with styling classes using global SCSS in React are causing unexpected behavior

Currently, I am working on a React project that includes the use of SASS for styling purposes. While implementing modular CSS in my components, I have encountered an issue with applying styles from a main.scss file in my Layout.js component. The unique a ...

cssreactjssassselectornext.js

Inserting a vertical barrier in the midst of the content

I am struggling to create a vertical divider and align the text properly in the top right corner of my screen. https://i.sstatic.net/UqURE.png Currently, I am facing issues with displaying the divider and positioning the text correctly. <div class="r ...

htmlcssbootstrap-4

iOS devices are not displaying the background image as intended

I've searched through previous answers on the SO platform, but I'm still unable to find a solution that works for me. I have a static Gatsby site with an infinite scrolling background implemented on desktop, and a static image displayed on mobile ...

htmlcssreactjssassgatsby

Is it possible to modify the spacing of menu items in the React Material-ui Drawer component?

Recently, I decided to incorporate Material-UI into a React project for the first time. The AppBar was set up to trigger Drawer, which displayed a list of menu items in the sidebar. However, an issue arose with excessive margin-top spacing. Here is an ill ...

cssreactjsstylescomponentsmaterial-ui

What is the best way to incorporate a unique box shadow onto my svg image?

While I've seen a similar question here: How to add box-shadow to a svg path circle shape, I am struggling to grasp how the transition from box shadow characteristics to SVG drop shadow characteristics was achieved. (Especially given that SVG Drop sha ...

csssvg

What is the reason behind hyperlinks breaking the continuity of the text on a line? Is there a

When I have a line of code containing several hyperlinks, my desired output is a single line. However, despite using CSS to set white-space to nowrap, the result is not as expected. The line of code in question is: <a href="profile.php?v=<?php echo ...

phphtmlcss

"Combining background images with javascript can result in displaying visual elements

Hello! I am in need of assistance with a CSS + Javascript fog effect that I have developed. It is functioning properly on Firefox, Opera, and Chrome but encountering issues on IE and Edge browsers. The effect involves moving two background images within a ...

javascripthtmlcssinternet-explorermicrosoft-edge

Having issues with implementing the Bootstrap form-check-inline feature

I have been attempting to utilize the form-check-inline feature from Bootstrap Forms without success, as it seems to be stacking checkboxes vertically instead of inline: This is the code snippet I am working with: <h1>Create Patient</h1> < ...

htmlcssbootstrap-4

"Can you explain the method by which reveal.js adjusts the size of

I have been exploring the resizing behavior of elements in reveal.js and trying to understand how they dynamically adjust. If you resize the page height, you can observe that the elements shrink up to a certain extent along with the page. However, when in ...

javascripthtmlcssreveal.js