Bootstrap3 Removing Parent Menu onClick

Using the Bootstrap menu clicking on a parent menu item reveals the child items. The parent page isn’t opened in the traditional menu way.

This is by design.

In summary, clicking on the parent menu item shows child menu items as drop down
Hovering over the parent page has no effect.

The result which I wanted was:

Hover over parent menu item to show child menu items in a drop down
Click on parent to change page, showing parent page.

The onclick of the parent menu item causes a drop down to appear and not to move forward to view the parent item

Changes to be made

  • onclick to open parent item
  • hover to show dropdown

To implement the changes I removed the data-toggle attribute and added a hover function emulating the click action but adding the open class.

I added the following to the header.php file of the WordPress child theme.

<script type="text/javascript">
var $vntweb =jQuery.noConflict();
$vntweb(document).ready(function ($vntweb) {
	$vntweb('a').removeAttr( 'data-toggle');
	$vntweb('.dropdown').hover(function() {
	     $vntweb(this).toggleClass('open');
	});
});
</script>

A better place to add this would be an included JavaScript file.

I like to add my own variable $vntweb with a noConflict, rather than simply the use of $. Usually this keeps me out of trouble, avoiding conflicts with other uses of $ as a variable

 

Bootstrap3 One and a Half Offset

With 3 1/3 width columns, col-md-3, to be centred within a bootstrap3 col-md-12 I was looking at adding an offset at the left something similar to col-md-offset-1.

Centring 3 Bootstrap3 col-md-3 divs within a row requires an offset which is 1.5 times a single column width. ie. two of these widths, one each side, but we don’t need the one at the right end as we are using an offset.

The situation: for a website footer I was including a widget area which I wished to have 3 columns of links and corporate references.

To give a better looking footer I was looking to have larger side margins and use the bootstrap col-md-3 for each of the columns.

However, the one and a half width doesn’t exist in Bootstrap.

As a percentage this is 100% * 1.5/12 = 12.5%.

Looking at the percentage width assigned to a single width column this is given as 8.33333333%.

Working from the single column width to 1.5 times gives a width of 12.499999995%.

I looked at the other column widths to see a consistent under valuing of the percentage.

I chose to use this width as it gives a small space between the columns, and less chance of the widths summing up to cause the floats to drop onto the next line.

With the 12.499999995% width I created a new offset specific to the larger width devices of col-md-offset-1-half.
thus giving

@media (min-width: 992px) {
   .col-md-offset-1-half { margin-left: 12.499999995%;}
}

I was unable to add the offset within the layout, it being a series of WordPress widgets. As I was managing the content I made the assumption that all 3 widget areas would be occupied.

So having created the above additional column and handled the responsive offsets, whilst writing this I was considering my original implementation decisions.

I found it easier to add this offset to the first element

@media (min-width: 992px) {
   .footer .widget:first-child{margin-left: 12.499999995%;}    
}

I could increase the left margin to get the desired insert.

For smaller width screens the insert can be appropriately reduced, if desired.

Based on this view I returned to my work to redesign it using row padding rather than affecting the column offset.

I had investigated the idea of creating a one-and-a-half offset for use in centring 3 columns in a bootstrap3 row. However, as I was unable to edit the particular row layout chose to add a margin to the first child element, when viewed on larger devices.