I have main menu in Voyager which has some items in it (navbar buttons).
I output all of the items in my blade view with
{{menu('main', 'bootstrap')}}
Problem is that all of the items (navbar buttons) have the same look to them.
I have custom classes for them in my style.css file but I could not find a way to style all the items differently.
Database menu does not provide a menu_items table where I could add my own classes either.
I figured out that you have to use {{menu('main', '_json')}} and afterwards you iterate each of the items in a foreach loop and do whatever you want with them.
There are various methods to do this:
Method 1: If you are using the bootstrap in that case you can use the below code inside your blade template. Make sure to change the FrontendMenu as per the menu name that you added in the backend.
{{ menu('FrontendMenu', 'bootstrap') }}
Method 2: If you want to add custom style and make more changes to the menu in that case you can follow the below steps.
Go to the path projectname\vendor\tcg\voyager\resources\views\menu
Copy the default.blade.php and paste it inside projectname\resources\views
And rename it as mymenu.blade.php
And change the menu code in template from {{ menu('FrontendMenu', 'bootstrap') }} to {{ menu('FrontendMenu', 'mymenu') }}
Then finally you can make any changes inside mymenu.blade.php that you want to do you can add class to ul, li and make changes in html as well.
Refrecen Video
Related
I am using Drupal with the Commerce Module to build a webshop. I am using the Commerce Cart Block to display a cart icon with the amount of items in the cart, in the navigation bar.
Now I would also like to display the Cart Block on the Cart page, but with a different template than being used in the navigation bar.
I am using the debug mode, which let me see what I could call the file names to use them like I would like to. But above both Cart Blocks it says the same file name, so I can't output two different templates. I tried putting primary_menu-- before the navigation cart block and content-- (the region the cart block is going to be in), but they don't work.
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'commerce_cart_block' -->
<!-- BEGIN OUTPUT from 'themes/custom/verdamigo/templates/commerce-cart-block.html.twig' -->
This is shown above both cart blocks (which are on the same page). So how can I use two different templates for both blocks.
primary_menu--commerce-cart-block.html.twig
is not working.
I would like to be able to edit both the block in the primary_menu and the block in the content-region. But both carts get output with the same template.
In an effort to decouple Blocks from Displays, Drupal 8 renders a block independently of which display it's in and what region/weight it has in that display (see Twig Template naming conventions) :
Region-specific block templates are not available in Drupal 8.
This removes the ability to override block.tpl.php by region, and for hook_preprocess_block() to adjust variables based on it. Instead, core developers recommend to manage block template overrides with CSS or using additional blocks.
But you can still work around this by implementing hook_theme_suggestions_HOOK_alter() :
function SOME_theme_suggestions_block_alter(array &$suggestions, array $variables) {
if (!empty($variables['elements']['#id'])) {
$block_id = $variables['elements']['#id'];
$block = Drupal\block\Entity\Block::load(block_id);
$region = $block->getRegion();
// Allow per-region block templating.
$suggestions[] = 'block__' . $region . '__' . $block_id;
}
return $suggestions;
}
Note : the template name should begin with "block" since you override a block template, so in your case the override file should be named block--primary_menu--commerce-cart-block.html.twig.
I'm inexperienced at coding and trying to build a pretty simple site with some HTML and CSS in Dreamweaver. I'd like my navigation menu to highlight the current page a viewer is looking at, and I've found different ways to do this. However, to make life easier as the site evolves, I've made the navigation menu an uneditable region of a template. I'm therefore finding myself unable to make the coding changes (e.g., giving a unique class to each link or a unique body id to each page) to each page that would seemingly allow me to highlight the current page link. Thanks!
A simple way to do this is with Dreamweaver template attributes which allow you to have editable tag attributes:
https://helpx.adobe.com/dreamweaver/using/defining-editable-tag-attributes-templates.html
While editing your template, if you put your cursor on the nav item class, you could then go to Modify > Templates > Make Attribute Editable.
Then, when editing the page based on the template, you'll be able to add an active class.
You could use jQuery for this to detect a word in url:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(document).ready(function($) {
if(window.location.href.indexOf("contact") >= 0){
$(".contactLink").addClass("active");
}
});
</script>
<style>
.active { color: black; font-weight: bold }
</style>
contact
This could add a class to the menu item that has the word "contactLink" as a class. So long as you have this js on all pages (put it in a file rather than hard coded on all pages) it will work. If you copy the above code into a page called test.html the link is normal. change the name to contact.html and it goes black..
Give each menu item a class, and then duplicate the code above for however many items you have.
There are more dynamic ways of doing it, but if you don't have millions of pages, is a nice easy way.
In my rails app I have a bootstrap nav menu with five items, each with a welcome/_____.html.erb document to which the menu item is linked (e.g. welcome/personality, welcome/game, etc.).
I put this as the link to the new page for the first menu item:
Know Your<br>Personality
And it works fine, but trying to click on the next menu item using the same href="welcome/game" link gives me an error message indicating it is trying to access welcome/welcome/game.
This is in my application.html.erb file, so it's not something I can change from page to page. Can anyone see a way to fix this issue?
You need to change your href to /welcome/personality. Notice the / in the front which tells your router to use the root_url and add what you have, otherwise it will keep adding /welcome/welcome/welcome...
I want to add html after the contents(sub-nav toggle button) in the li in my wordpress nav if the item has children...
I've tried using nav_menu_link_attributes and wp_nav_menu_args but can't seem to have either do what I want, because I need to check the class and modify the args.
After not receiving a response I just used jquery to select the elements and append. Not quite the best solution, but works fine. Here is the line of code:
$('#site-nav .menu-item-has-children').append('<div class="sub-menu-toggle" id="sub-menu-toggle">Menu</div>');
I have a nav.shtml file in which I am setting a class on the current menu item as follows:
Faculty'>http://root/level1/level2/page.shtml">Faculty & Staff
This is fine for the top-level pages, but a few have subpages and I would like to be able to set the class on the top-level menu item if the current page is a subpage as well. E.g. There is a "Faculty/Staff" menu item which goes to an overview page, faculty.shtml, then there are some links on that page to individual faculty/staff pages in a subdirectory. If I'm looking at one of the individual subpages, I still want the class to get set on the "Faculty/Staff" menu item.
So, I need something like:
"if $DOCUMENT_URI=/level1/level2/page.shtml *or* if $DOCUMENT_URI=/level1/level2/level3/*.shtml".
I can't seem to figure out the correct syntax... Can anyone help me out?
The following should work for you, based on the example provided:
<!--#if expr="$DOCUMENT_URI = /\/level1\/level2\/page\.shtml/ || $DOCUMENT_URI = /\/level1\/level2\/level3\/.*.shtml/" -->