Tagged: , ,

Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • #295101

    Hello,

    I try to make a custom menu in the sidebar of my pages but I can’t find the solution. I’d like to make a secondary menu on the left of my pages (like this : http://www.kriesi.at/themes/enfold/pages/) and I want to custom it (text, link, shape).

    How can I do this please ?

    Thanks for your help,

    Franck

    #295181

    Hey SphereEvenements!

    That is the WordPress custom menu widget with a menu selected. You would then need to use custom css to change the appearance of it as the theme doesn’t have customization options for it.

    You can also look for a plugin that comes with more style options if you aren’t comfortable with CSS. Ex: https://wordpress.org/plugins/jquery-vertical-accordion-menu/

    Best regards,
    Devin

    #295194

    Thanks for your help Devin ! I’ll take a look to this plugin tomorrow.

    Best regards,
    Franck

    #295204

    Hi Franck

    Please try and let us know so we can mark the thread as resolved or assist you further

    Best regards,
    Yigit

    #295417

    Hi,
    It’s Ok I’ve created a sidebar menu with the WordPress custom menu widget, but could you tell me where can I change CSS for this menu please ? (without changing CSS of the main menu)
    Thanks !
    Best regards,
    Franck

    #295422

    Hey!

    Can you post the link to your website and point out the menu? Also, what changes would you like to make?

    Best regards,
    Yigit

    #295428

    I work in local mode so I can’t post the link of the page wich there is the menu :(
    But my menu seems like this one : http://www.kriesi.at/themes/enfold/pages/

    I ‘d like to have a kind of mega menu in my sidebar like this :

    * PAGE 1 CATEGORY
    page on subject 1
    page on subject 2
    page on subject 3
    * PAGE 2 CATEGORY
    * PAGE 3 CATEGORY

    I’d like to change default font, font weight, and maybe add a illustration before the title of de page category

    Thank you Yigit
    Franck

    #295429

    Hey!

    Please add following code to Quick CSS

    .widget_nav_menu a {
    font-family: arial;
    font-weight: bold;
    }

    You can try using UberMenu – http://codecanyon.net/item/ubermenu-wordpress-mega-menu-plugin/154703 but it may require some customisations for side menu as well

    Cheers!
    Yigit

    #295446

    Ok thank you ! How can I add a bullet point (or icon, or image) before the text of the categories in my menu please ?
    How can I change CSS of each level of my menu (category, sub-category) and the placement of them please ?
    Can I use mega menu in the side bar ?

    Best regards !
    Franck

    #295473

    Hey!

    1- There are bullet points on my local installation, please see – http://i.imgur.com/ymYGelX.png
    2- Can you elaborate please? Please my screenshot above. Indentation is fine on my menu
    3- You can try using UberMenu – http://codecanyon.net/item/ubermenu-wordpress-mega-menu-plugin/154703 but it may require some customisations for side menu as well

    Best regards,
    Yigit

    #295566

    Hey Yigit,
    You can see my menu here : http://www.sphere-evenements.com/menu-gauche-enfold.jpg

    As you can see, there is no bullet point in front of my categories. Also, my menu is not aligned at left but at right (sub-categories are shifted to the left, when yours are shifted to the right).

    However, in your screenshot, all levels of your menu have the same CSS (bold, color). I’d like to differentiate each level with CSS but I don’t know how.

    Then, I’d like to replace the bullet point by an image or something else than a point. Is it possible ?

    Thanks for your help :)

    Franck

    #296231

    Hi!

    Can you post a link to the page with the menu please? It helps us to investigate the structure and css code.

    Best regards,
    Peter

    #297366

    Hi !
    Sorry for the delay of my response !
    I work in local mode so where can I find the “.css” folder in my local website to show you the structure and css code please ?
    Thank you,
    Franck

    #297397

    Here it is my code for the sidebar menu of this page :

    
    <aside class="sidebar sidebar_left  three alpha units" role="complementary" itemscope="itemscope" itemtype="https://schema.org/WPSideBar"><div class="inner_sidebar extralight-border"><section id="nav_menu-3" class="widget clearfix widget_nav_menu"><div class="menu-menu-test-barre-laterale-container"><ul id="menu-menu-test-barre-laterale" class="menu"><li id="menu-item-2141" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-1057 current_page_item menu-item-has-children menu-item-2141"><a href="http://localhost/wordpress/agence-evenementielle-paris-et-ile-de-france/">Agence événementielle Paris et Ile de France</a>
    <ul class="sub-menu">
    	<li id="menu-item-2133" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2133"><a href="http://localhost/wordpress/cluedo-geant/">Animation Cluedo géant</a>
    	<ul class="sub-menu">
    		<li id="menu-item-2135" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2135"><a href="http://localhost/wordpress/petit-dejeuner-d-entreprise/">Petit déjeuner d’entreprise</a></li>
    	</ul>
    </li>
    	<li id="menu-item-2136" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2136"><a href="http://localhost/wordpress/soiree-de-fin-annee-entreprise/">Soirée de fin d’année d’entreprise</a></li>
    	<li id="menu-item-2137" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2137"><a href="http://localhost/wordpress/soiree-a-theme/">Soirée à thème</a></li>
    	<li id="menu-item-2138" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2138"><a href="http://localhost/wordpress/garden-party/">Garden-party</a></li>
    	<li id="menu-item-2139" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2139"><a href="http://localhost/wordpress/soiree-casino/">Soirée casino</a></li>
    	<li id="menu-item-2140" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2140"><a href="http://localhost/wordpress/cocktail-dinatoire/">Cocktail dinatoire</a></li>
    	<li id="menu-item-2142" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2142"><a href="http://localhost/wordpress/arbre-de-noel-ce/">Arbre de Noël CE</a></li>
    </ul>
    </li>
    <li id="menu-item-2159" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2159"><a href="http://localhost/wordpress/mariage/">Organisation Mariage</a></li>
    </ul></div><span class="seperator extralight-border"></span></section></div></aside>
    
    #297485

    Hi!

    Thank you for the info.

    I’m sorry but we really need to inspect the actual website in order to give you a proper css solution. If possible, please post a screenshot of how you want the menu to look like in the end.

    Cheers!
    Ismael

    #297841

    Hi Ismael,
    Thank you for your answer.
    To have this customized menu (with category and I want to show), I use WordPress custom menu widget with a menu selected.
    Unfortunatelly, as I work on local mode, I can’t give you an on-line accessible URL.
    I’d like my menu looks like this : http://www.sphere-evenements.com/maquette-menu-gauche-enfold.jpg
    With :
    - Expandable menu
    - Customized arrows which appears when we click on the category to expand the sub-menu
    - Customized colour of the category when we are on the page
    - Different colours and font to organize my menu into a hierarchy

    Thanks for your help !
    Best regards,
    Franck

    #299272

    Hey!

    Unfortunately this customization is beyond the scope of our support forum. The arrows, expandable submenu, etc. requires quite a lot of work (overall probably more than 3 hours) and we can only help with small css code adjustments. If you want to add such a menu you can try wordpress plugins like UberMenu or a plugin featured in this article: http://premium.wpmudev.org/blog/free-wordpress-accordion-menu-plugins/

    Regards,
    Peter

    #299319

    Hi !
    Ok thank you, I understand.
    So, could you help me to adjust CSS code of this static menu please ? http://www.sphere-evenements.com/menu-gauche-enfold-static.jpg
    Thank you,
    Best regards,
    Franck

    #299481

    Hi!

    Alright. You can use the custom menu widget then remove the default bullet points using this on Quick CSS or custom.css:

    #top .widget_nav_menu ul ul li:before {
    content: '';
    position: absolute;
    top: 5px;
    }
    
    #top .widget_nav_menu ul ul li.current-menu-item:before {
    content: url('ARROW GRAPHIC URI HERE');
    width: 3px;
    height: 3px;
    display: block;
    position: absolute;
    top: 5px;
    }

    Create your own arrow image then place it as content value of the current-menu-item.

    Cheers!
    Ismael

    #299567

    Hi Ismael,
    Thank you for your help. As you see : http://www.sphere-evenements.com/menu-enfold-sidebar-arrow.jpg, I have problems with differents things :
    - My categories are not aligned like this : http://www.sphere-evenements.com/menu-gauche-enfold-static.jpg.
    - The first category have a grey background and is not in orange like this : http://www.sphere-evenements.com/menu-gauche-enfold-static.jpg
    - The arrow is on the right of the text and not on the left
    Thank you,
    Franck

    #299851

    Hi!

    Please refer to Peters post above about advanced customization for things outside of the theme: http://www.kriesi.at/support/topic/custom-sidebar-menu/#post-299272

    If you want individual customization for the menu then you’ll need to look into a freelance developer from somewhere like Codeable or Envato Studio.

    Cheers!
    Devin

Viewing 21 posts - 1 through 21 (of 21 total)

The topic ‘Custom sidebar menu’ is closed to new replies.