Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Hi Andrew,
I’ve got to the point were I was able to create my own custom menu with the JQuery Accordion Menu Widget 3.1.2. by placing it in the primary widget area on top of the page. However, these ‘accordion-buttons’ were places vertically under each other and not as single buttons next to each other, with each having a single accordion functionality. So I gave up on that particular widget.
I think I have to manually change code to make the wordpress menu work, am I right?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
these ‘accordion-buttons’ were places vertically under each other and not as single buttons next to each other
Could you not have just floated the elements left, to get them side-by-side?
I don’t know how to do this…I’ve tried it and if you can click the link http://bit.ly/YSD6Zg again you can see what I mean…
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Add this CSS;
.art-blockcontent-body ul li {
float: left;
}
.art-blockcontent-body ul li li {
float: none;
}
Thank you for the option, Andrew.
I’ve added the lines to the style.css file, and you can see the effect. Nothing has changed in the menu and now all content (page) files are under eachother. Do you have another suggestion?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I think you need to clear your browser cache.
Thank you Andrew! We’re one step further.
I implemented your first solution wrong. Now I’ve done it right and are the buttons next to each other.
Can you help me with the last question; how can I get them to take on the style of the Menu? I’ve specified in the CSS-file how I want to make my menu look like. I want to implement this in this custom menu.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
What do you want them looking like?
Like the menu you can see I’ve added above right now.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
All above links seem to link to the same webpage, so I can’t see what you mean.
That’s true, I’m working on that website. If you click the link http://bit.ly/YSD6Zg then you can see that I’ve activated the usual menu. You can see the buttons in Droid Serif and subitems in Helvetica. How can I apply the CSS-code for the menu to my custom menu that is just created with the widget?
Am I clear to you?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Add this;
.art-blockcontent-body ul li {
background: none;
}
.art-blockcontent-body a,
.art-blockcontent-body a:link {
color: #5F5B54;
padding: 0 12px;
margin: 0 0;
line-height: 33px;
font-family: "Droid Serif",Arial, Helvetica, Sans-Serif;
font-size: 20px;
text-align: left;
text-decoration: none;
position: relative;
display: block;
overflow: hidden;
height: 33px;
cursor: pointer;
}
.art-blockcontent-body a:hover{
color: #7F5305;
}
Thank you very much, Andrew! You suggestions work, now I think I can figure it out myself!
