Move menu item

Support
#1

Hey! Is there a way to move one menu item in the nav bar to be close to my logo (which is on the left) while keeping the rest of the menu on the right?

#2

Hi Morr,

Is is the website you’re working: https://www.bloopanimation.com/start-here/?

The following CSS will move the COURSE menu item to left:

@media (min-width: 980px){
    li#menu-item-105616 {
        position: absolute;
        left: 150px;
    }

    nav#ubermenu-main-2-primary {
        position: static;
    }
}

Let us know how it goes!

#3

Thanks! It worked.

What about adding a border around that menu item?

#4

Hi Morr,

Update the following code fragment of above provided code:

    li#menu-item-105616 {
        position: absolute;
        left: 150px;
    }

With the following code:

li#menu-item-105616 {
    position: absolute;
    left: 150px;
    border: 2px solid red;
    border-radius: 10px;
}

Hope that helps.

#5

Great! Now it just seems like the menu item is very large, it’s top and bottom are wider than the other items. How can I make the padding smaller?

#6

Hello Morr,

If you want to adjust the paddings, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.ubermenu-main .ubermenu-nav .ubermenu-item.ubermenu-item-level-0>.ubermenu-target {
    padding: 15px 20px;
}

Feel free to adjust the padding that fits with your design.

#7

That changes all the items. You’ll notice that the “courses” menu item is no aligned vertiacally with the other menu items for some reason… I only want to change that one.

#8

Hello Morr,

If you want to target only the Course menu item, use this code instead:

li#menu-item-105616 a{
    padding: 10px 15px;
}

We would loved to know if this has work for you. Thank you.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.