Menu Tweaks

riugn557 · November 19, 2017, 11:11pm

Hi there!

I’ve put a menu in the sidebar on this page http://www.eurasianwhispers.com/shop-books/

It has a main section, books, and two children, fiction and non-fiction.

I’ve been trying to format the appearance of it using ubermenu option icon that appears on the ‘menus’ area of wordpress, but have not been having any luck in getting things to work. Would you be able to help me out with a few things:

I am trying to get a coloured background strip for the ‘Books’ section of my menu. What I mean by this is the grey rectangle you can see in the background of the ‘category’ and ‘format’ sections you can see in this webpage’s sidebar. Like theirs, I would like it to span the width of the sidebar and for it to be blue instead of grey.
Do you know how I can remove the faint grey line that appears beneath ‘books’?
Can I remove the two black lines at the top and bottom of the sidebar?
Can I please stop the words in the menu from being underlined?
Can I adjust the width of the sidebar?
Do you know how I can alter the font, colour and size of the words in the menu?
Finally, do you know how I can implement a coloured, vertical line to appear at the content-edge of the sidebar when you hover over the corresponding menu item? Much like the red line that appears when you hover over the menu icons in your demo here http://demo.theme.co/ethos-3/ but of course for my one the line will need to be vertical and at the right edge of the sidebar.

Thank you so much!

EW

ruenel · November 20, 2017, 1:53am

Hello There,

Thanks for writing in!

1.) The width of the sidebar is 300 pixels. I am not sure of what you want to have in this menu. You must have forgotten to include the example url.

2.) You can make use of this code:

#menu-shop-sidebar .menu-item{
    border-color: transparent;
}

3.) Code in #2 remove the black line also.

4.) You can make use of this code:

#menu-shop-sidebar .menu-item a {
    text-decoration: none;
}

5.) Adjusting the width of the sidebar will also adjust the width of the content are. You should be able to adjust it in the theme options, X > Launch > Options > Layout & Design > Content Width.

6.) The font size of the menu is inherited from your global settings in X > Launch > Options >Typography > Root Font size and the Body Font.

7.) You can make use of this code:

#menu-shop-sidebar .menu-item > a{
    border-right: solid 2px transparent;
    display: block;
}

#menu-shop-sidebar .menu-item > a:hover {
    border-right-color: red;
}

Hope this helps. Please let us know how it goes.

riugn557 · November 20, 2017, 10:50pm

Hi Rue,

Thank you so much for your help!

Sorry - the example page I wanted to show you was this one https://www.waterstones.com/books/bestsellers You can see grey background bar that I mean on the top-menu items in the left hand sidebar
That’s great, but is it possible to keep the grey lines in between the menu items and just lose the top black ones?
See above
Brilliant, thank you
I tried using that option but it seems to affect the sidebar globally. I have two types of sidebars throughout the website, but I only want to reduce the width of one of them. Is it possible to do this within specific pages’ CSS. So, for example, just reduce the sidebar width of this page http://www.eurasianwhispers.com/shop-books/
Similarly, this affects the global settings - can I do it within specific pages’ CSS?
That’s great, but would it be possible to slightly reduce the height of the red bars so they do not touch the perpendicular grey lines?

Thank you again, I really appreciate your help

EW

paul.r · November 21, 2017, 4:35am

Hi,

You can add this in Custom CSS

#menu-shop-sidebar .menu-item.menu-item-has-children {
   background:#E2E2E2;
   padding-left:10px;
}

You can try this code instead.

.x-sidebar .widget.widget_nav_menu .current-menu-item {
   border:0;
}

Yes, you can add the code below in Edit Page> Cornerstone > CSS

.x-sidebar.left {
    width: 15%;
}

You can override the global setting by adding the code below in Edit Page > Cornerstnone > CSS

body { 
    font-size:12px;
    font-family:Arial;
}

Sorry it’s not possible as you cannot adjust the length of the border itself. The length is always the same as the element.

Thanks

riugn557 · November 21, 2017, 10:39pm

Hi Paul,

Thank you for this - do you know how I can have a different colour background strip for the parent menu items (i.e. like ‘books’) and children menu items (i.e. like ‘fiction’ and ‘non-fiction’)?

2+3) Perfect

Perfect
Again, can I have different text formatting for the parent items and the children items
OK, no problem, but could I have a different border colour for parent and children items?

Cheers,
EW

lely · November 22, 2017, 6:26am

Hi EW,

For further design or appearance changes, we can always use browser developer tools.

1.) For example: https://screencast-o-matic.com/watch/cbX31o2Ouy

#menu-shop-sidebar .menu-item.menu-item-has-children .sub-menu a { /* CSS for child menu items*/
    display: block;
    background: green;
    /*Add text formatting here for child items #6*/
}

#menu-shop-sidebar .menu-item.menu-item-has-children> a {  /* CSS for parent menu items*/
    background: red;
    display: block;
    padding-left: 10px;
    /*Add text formatting here for parent items #6*/
}

No need for this CSS:

#menu-shop-sidebar .menu-item.menu-item-has-children {
    background: #E2E2E2;
    padding-left: 10px;
}

7.) See this: https://screencast-o-matic.com/watch/cbX31Z2Ou8

.x-sidebar .widget ul li:first-child {
    border-color: green;
}

.x-sidebar .widget ul li {
    border-color: red;
}

And of course you are always welcome!

Hope this helps too.

riugn557 · November 22, 2017, 1:38pm

Hi Lely,

Thank you, yes, that does indeed help.

I just had two final queries about this:

Would it be possible to have the faint grey lines appear only before and after the parent items, but not to have anything in-between the child items? (You can see what I mean on the updated page in question).
Number 7) wasn’t actually what I was looking for: I was hoping to replicate the effect that Friech helped me produce with:

#menu-shop-sidebar .menu-item > a{
border-right: solid 2px transparent;
display: block;
}

#menu-shop-sidebar .menu-item > a:hover {
border-right-color: red;
}

but have that only for the child items, not the parent items. As it stands, that produces a right-hand border color when hovered for all of the menu items.

Thank you,
EW

nabeel · November 22, 2017, 6:01pm

Hi again,

To have grey lines only for the parent item, you can make use of the following code:

#menu-shop-sidebar .menu-item.menu-item-has-children>a {
    width: 100%;
    border-bottom: 1px solid #d4d4d4;
    border-top: 1px solid #d4d4d4;
}

#menu-shop-sidebar .menu-item.menu-item-has-children {
  border: none !important;
}

To achieve the effect only for the child theme, add this code in your Child Theme:

#menu-shop-sidebar .sub-menu .menu-item > a{
    border-right: solid 2px transparent;
    display: block;
}

#menu-shop-sidebar .sub-menu .menu-item > a:hover {
    border-right-color: red;
}

Let us know how this goes!

riugn557 · November 27, 2017, 1:18am

Hi Nabeel,

Thank you for your help.

I just realised that I changed the parent item ‘Books’ from being a page to being a custom link that doesn’t lead anywhere when you click on it - i.e. it is just text in the menu. However, at the moment when you hover over it the hand cursor icon still comes up, as if it is a link. Can I please have it so that this doesn’t happen and that the cursor remains an arrow?

Also, I think I’ve done something to the menu sidebar on the page http://www.eurasianwhispers.com/shop-books__trashed/shop-fiction/ which has reversed the bars in between the menu items - the top and bottom two are grey and the middle ones are black.

Can you please help me return this to the original setting with the absolute top bar being black and the absolute bottom being black but all other middle bars should be the grey? I have tried to figure out where I have messed this up with the CSS but I can’t see it…

Thank you so much!
EW

lely · November 27, 2017, 3:57am

Hi There,

By default, since it is a menu item, it will appear as link. See this: https://screencast-o-matic.com/watch/cbXtek2vr8

li#menu-item-1819 > a {
    cursor: default;
}
/*For Borders*/
.x-sidebar .widget div>ul>li>ul>li {
    border-color: rgba(0,0,0,0.085) !important;
}
.x-sidebar .widget div>ul>li:last-child {
    border-color: #000;
}

Further customization from here would be getting into custom development. You may wish to consult a developer for more changes. Thank you for understanding.

riugn557 · November 27, 2017, 10:41pm

Hi Lely,

OK, no problem, I’ll investigate that on my own.

But would you be able to help me with the second part of my question, how I can revert the sidebar menu back to its original form, i.e. black bars on the top and bottom and grey bars in between? - I can’t figure out what change I have made that has caused it look like how it does at the moment…

Thank you,
EW

lely · November 28, 2017, 7:00am

Hi EW,

The CSS previously suggested should fixed the previous issue stated. Since you do have caching, please note to clear cache after applying those CSS to see changes.

system · December 8, 2017, 7:00am

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