Hi,
I am right now using CSS to style the primary menu. Using Inspect element I am locating the following menu items to style .tm-primary-menu general menu. I am able style it as I want.
.menu-item I can style the background color but not the color or change the font size. I also tried using an !important tag, but that did not work. .current-menu-item not able to style. I am also working on hover effects. There is obviously something I am not seeing.
So it seems there is some uk or parent styling blocking the path. Could you list the primary menu css used to style the menu?
Can you also list the code to move the menu to for instance below the header area? Or just above the content area?
I am also looking into adding an additional menu perhaps at the top of the page.
Thank you very much!
Hey Paal,
To style your menu item you need to target the <a> tag with more specificity that the default CSS, for instance .tm-primary-menu .menu-item > a.
You must use your browser inspect and inspect the element you would like to style, then in your inspector Styles tab you can see the current style(s) applied and its selector(s). You must make sure your CSS has more specificity.
While I am always willing to help, this isn't Beans specific. It really comes down to basic CSS specificity understanding and I indeed can't list all the CSS (nobody really can in fact) as it is much easier and precise to use your browser inspector. There is no shortcut when it comes to that Paal, you have to learn how to work with CSS. The good news is that it is a very easy language and there are a zillion tutorials about it freely available 🙂
Good luck with that,
Thank you Thierry. It was unclear for me while looking at the html and CSS through inspect element in the browser that I had to add 'tm-primary-menu' to the '.menu-item > a' to get it to show.
So the class code I am using to adjust the CSS of the primary menu is:
.tm-primary-menu = Effects the full menu.
.tm-primary-menu .menu-item a = Effects each menu item.
.tm-primary-menu .menu-item a:hover = Effects each menu item on hover.
.tm-primary-menu .current-menu-item a = Effects the current page. NB! Here I had to add the !important tag for the CSS to display.
I am continuing to play with the menu and am noticing that to affect the submenu drop down I had to use the .uk-dropdown-navbar.
Hi Thierry
1. I am trying to move the primary menu from beside the title to right below. So it looks like this: http://kursholderen.no/
The code I am testing:
beans_remove_action( 'beans_primary_menu' ); beans_add_smart_action('beans_header_after_markup', 'beans_primary_menu');
This is not working for me. I am able to remove it but not add it back in.
2. What is the correct way to add a new menu in Beans Framework? For instance a footer menu.
3. Could you also list (or link) the best practice of adding in a search bar as well?
Thank you!
Hey Paal,
1. Moving the primary menu below the header
What the code you provided do is "Remove action ID beans_primary_menu, then "re-add" action ID beans_primary_menu with a different hook". The problem here is that beans_add_smart_action() listen to previous flags and since it is flagged as "removed" it won't re-add it. The approach you are taking is more WP/Genesis where actions needs to me removed and re-added to achieve what is actually modifying an action. Beans makes it easier and more elegant by allowing to modify actions. Find more info in this article. In your example, you would use beans_modify_action_hook( 'beans_primary_menu', 'beans_header_after_markup' ). That said, to reproduce the example link you provided you also need to add a container (otherwise menu will go full width) and remove the float right. Here is the snippet you are looking for.
// Move menu below header.
beans_modify_action_hook( 'beans_primary_menu', 'beans_header_after_markup' );
// Remove float and add container.
beans_remove_attribute( 'beans_primary_menu', 'class', 'uk-float-right' );
beans_wrap_markup( 'beans_primary_menu', 'example_primary_menu', 'div', array( 'class' => 'uk-container uk-container-center' ) );2. Adding a menu
Check this discussion which should be just what you are looking for.
3. Adding a search form
You can simply attache a callback to any hook on the page and use the WP get_search_form() function. Beans automatically adds the correct form styling etc. for the search form. Here is an example to attached a search form in the main container:
add_action( 'beans_fixed_wrap[_main]_prepend_markup', 'example_search_form' );
function example_search_form() {
echo get_search_form();
}Happy coding,
Hey thierry,
How to move the primary menu before or after header without moving the offcanvas menu button..??
Hey Anupam,
The off-canvas button is attached to the beans_primary_menu_append_markup hook by default (inside the primary nav ) but you can change it according to your needs. As an example, here is how you would prepend it to the main content:
beans_modify_action_hook( 'beans_primary_menu_offcanvas_button', 'beans_fixed_wrap[_main]_prepend_markup' );Note that it will still only be visible on small and medium breakpoints as it previous was, which you can also easily change by removing or modifying its uk-hidden-large class.
Happy coding,
Hey Thierry
Thank you for the help. it worked. and there was one more question i was thinking about to move the primary nav above header and add a banner ad space in its place but without moving the off canvas menu button.
so iwanted to know if there is any short cut methods to accomplish this..?
Here is the code snippet to add to your child theme functions.php
// Move menu above header and adjust classes.
beans_modify_action_hook( 'beans_primary_menu', 'beans_header_before_markup' );
beans_replace_attribute( 'beans_primary_menu', 'class', 'uk-float-right', 'uk-container uk-container-center' );
// Move the off-canvas button in the header and add floating class.
beans_modify_action_hook( 'beans_primary_menu_offcanvas_button', 'beans_fixed_wrap[_header]_append_markup' );
beans_add_attribute( 'beans_primary_menu_offcanvas_button', 'class', 'uk-float-right' );
// Add advert space.
add_action( 'beans_fixed_wrap[_header]_append_markup', 'example_header_advert' );
function example_header_advert() {
?>
<div class="uk-float-right">
<p>Advert space</p>
</div>
<?php
}Happy coding,
Hey Thierry
Will it show any widget space in the admin area.
Do you mean that you want to have a widget area for the advert space?
No, Actually i wanted to know can having 3 widget slows down a website..??
And thierry i made some changes to beans comments template. Would you like to see it..??
Regarding the widgets, it really depends which are the widgets but any of the WordPress core widgets shouldn't slow down your website.
Regarding the comments, feel free to share you work but kindly create a new discussion as this topic is initially about menus 🙂
Oh yes i appologize for that actually i was pretty excited. 😀 I'll make a new thread as soon as i get a fast internet and a wifi as for now i'm in pg so i won't be able to send it.
Hello Beans community !
Howdy there ?
I'm using Beans Child theme on my wordpress website, and I wanna change the existing menu (modal menu), actually it's a top modal type menu, and I wanna completly change it to a top nav bar menu.
How can I do that please ?
Thanks !