[doughballsParticipant]

Hello! Help on this is much appreciated! I’d like to change the default menu appearance for the site below, using the RENEW stack.

http://www.seandoherty.co.uk/mcswp

Ideally, I’d like it to look more like the screenshot attached. That is:

– text aligned left (or right – but not centred)
– solid black line underneath (I’ll use border-bottom 2px black solid), and closer to the text
– each item to occupy the same width (say 150px)
– remove the underline on hover, but have a colour change (maybe lighter black)

I’ve tried countless things – and as I’m new to this, I struggle to pin point where an element is getting it’s padding (or other style) from. I’ve used the inspector to highlight the nav bar, and then tried applying the new style (various combinations of padding:0; padding-left:0; margin:0;), to no avail. I can get the border, I can move ti close to the text, but the text always wants to sit in the middle. I’m sure this is a really easy fix but I have tried enough things to hold my hands up now! I’ve tried applying to:

.desktop .menu-item, .desktop .menu-item>a

.x-navbar .desktop .x-nav>li

li

ul

…none of which have worked. I’m loving the X Theme and have fine tuned some elements already but being literally 3 months into an online developer course my knowledge is frustratingly patchy! Any help appreciated 🙂

[ChristopherModerator]

Hi there,

Please add the following code in Customize -> Custom -> CSS :

.masthead-inline .desktop .x-nav {
    float: left;
}
.x-navbar .desktop .x-nav>li a {
    border-bottom: 2px black solid;
    margin-right: 8px;
height: 56px !important;
    width: 150px;
}
.x-navbar .desktop .x-nav > li > a:hover > span, .x-navbar .desktop .x-nav > li.x-active > a > span, .x-navbar .desktop .x-nav > li.current-menu-item > a > span {
    box-shadow: none;
}
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 0px;
    padding-right: 40px;
}

Hope that helps.

[doughballsParticipant]

Thanks Christopher that’s absolutely perfect 🙂

[RupokMember]

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts