Jump to content


Photo

Styling The Main Menu With Css


  • Please log in to reply
16 replies to this topic

#1 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 02 February 2016 - 05:33 PM

In nearly every website I've ever built, one thing I can confidently say is that menus may be the most difficult parts of a page to code. With the boom of responsive design, the menu (particularly, the unlimited level dropdown menu) got even more complicated.

 

The recent MD Main Menu 1.1 update cleaned up a lot of the code this menu adds to your site and believe it or not, made it easier to style. I wanted to change the design of the main menu on Kolakube to a dark style from the default gray.

 

Here's the CSS code I wrote to do it. I'll be simplifying it as MD grows, but I figure this could help you out now. Change the colors around to get an idea of how different things work:

/* MAIN MENU */

.main-menu,
.main-menu-search {
	background-color: #111;
	color: #fff;
}

.main-menu-triggers {
	border-bottom: 0;
}

.has-menu-main .main-menu-triggers-sep {
	border-left-color: #444;
}

.menu-main > .current-menu-item:not(.button) > a,
.menu-trigger-active {
	background-color: #1e1e1e;
}

@media all and (min-width: 1118px) {

	.menu-main > .menu-item-has-children:hover > a,
	.menu-main .sub-menu {
		background-color: #1e1e1e;
	}

}

@media all and (max-width: 1118px) {

	.menu-main .sub-menu .menu-item .menu-item-title {
		color: #fff;
	}

	.menu-content {
		background-color: #1e1e1e;
	}

}

.menu-trigger-active {
	border-bottom-color: #1E1E1E;
}

.menu-trigger:not(:last-child) {
	border-right-color: rgba(255, 255, 255, 0.05);
}

.menu-main .sub-menu a:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

.menu-main .menu-item-title,
.main-menu .search-input,
.main-menu .search-input:focus {
	color: #ddd;
}

.menu-main .menu-item-desc {
	color: #999;
}

.menu-social.menu .menu-item a:hover,
.menu-trigger:hover {
	color: #888;
}

- Alex
Check out the Kolakube blog or follow me on Twitter.

#2 Ray

Ray

    Brooklyn's Finest

  • + Legacy Member
  • PipPipPip
  • 132 posts
  • LocationLos Angeles

Posted 04 March 2016 - 10:20 PM

Thanks man, this (as always) worked like a charm.


I consult, create products and brainstorm all day


#3 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 05 March 2016 - 10:13 AM

Love to hear it! The CSS is a little complicated but I've never known dropdown menus to be simple code lol.


- Alex
Check out the Kolakube blog or follow me on Twitter.

#4 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 09 August 2016 - 07:55 PM

UPDATE: After working on some design updates at MDNET, I've updated the menu code here as well with some tweaks/code improvements. You can just swap out your old CSS with this and your main menu design will look a little more crisp. I'll probably be back here cleaning this up even more after releasing MD4.5. Nothing major yet, so stay tuned!


- Alex
Check out the Kolakube blog or follow me on Twitter.

#5 M&PMulder

M&PMulder

    Newbie

  • MD Customer
  • Pip
  • 1 posts

Posted 07 December 2016 - 03:25 AM

Where you should exactly put this CSS I have placed on menu.php but that didnt work



#6 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 07 December 2016 - 08:51 AM

Hey Peter, did you install a child theme to your site? You can get a starter copy from the downloads center and install/activate it like a theme. Once you've activated it, you can place the CSS into your style.css file.

 

Let me know if you need further instructions on this!


- Alex
Check out the Kolakube blog or follow me on Twitter.

#7 Cameron Adair

Cameron Adair

    Advanced Member

  • + Legacy Member
  • PipPipPip
  • 53 posts

Posted 07 December 2016 - 09:48 PM

Hey Alex, thanks for this code, helps a lot. quick Q.

 

Is it possible to turn the main menu off all pages by default, and only have it set to appear on blog post and category pages, unless turned ON via the post editor? Is that something I would need to hardcode into my php?



#8 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 09 December 2016 - 07:08 PM

Hey Cam, great question! We can override where the main menu loads in the child theme with hooks that come in MD.

 

You can paste this function into your functions file to first remove the menu entirely, then rehook it based on where you want it to show on your site:

function gq_template_redirect() {

	global $main_menu;

	// remove menu so we can re-add it under our own conditions
	remove_action( 'md_hook_after_header', array( $main_menu, 'display' ) );

	// add menu back to posts and category pages only
	if ( is_single() || is_category() )
		add_action( 'md_hook_after_header', array( $main_menu, 'display' ) );

}

add_action( 'template_redirect', 'gq_template_redirect' );

Your menu looks great with the popups! So glad you were able to get that up and running. Let me know how this trick works for you.

 

The only thing I should note is it looks like doing this will prevent you from adding the menu to single "Pages" with the post editor controls. If that gets in the way, let me know and I can figure something out.


- Alex
Check out the Kolakube blog or follow me on Twitter.

#9 maikman

maikman

    Member

  • MD Customer
  • PipPip
  • 21 posts

Posted 24 December 2016 - 05:35 PM

Hi Alex,

 

Is there any way to disable the social menu in the Main Menu on certain pages?

 

Thanks!

 

Maik



#10 Alexander Gonzalez

Alexander Gonzalez

    Member

  • + Legacy Member
  • PipPip
  • 19 posts

Posted 09 March 2017 - 10:26 PM

I added this into the css of my child theme and everything checks out except there is a border on the bottom of each link of the main menu.  If i run a search in social menu the border is removed. Also the links in the header menu have underlines on them on home page and then are removed through search in social menu.

 

I would like to remove the border permanently from these menus

 

thanks for the help



#11 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 11 March 2017 - 08:28 PM

Hey Alex, I'm happy to help you with this. Can you provide a link to your site (feel free to message me if you want to stay private).


- Alex
Check out the Kolakube blog or follow me on Twitter.

#12 Alexander Gonzalez

Alexander Gonzalez

    Member

  • + Legacy Member
  • PipPip
  • 19 posts

Posted 12 March 2017 - 01:56 PM

Alex,

 

Thank you for your response.

 

Unfortunately, my site lives locally for now.

 

The issues:  

 

  1. There is an underline on each header menu link ( unless there is a submenu item ) and i'd like to remove that ( it removes itself on all other pages except the homepage, idk why? any thoughts )  
  2. There is an overflow on each main menu link ( unless there is a submenu item ) and i'd like to rmove that ( like the header menu, it too removes itself on all other pages except the homepage)
  3. I don't know what CSS to add to make the submenu on the header menu get the right color upon selection. ( like the main menu item )

I've attached a couple of images to show what is happening and what i'd like to accomplish ( basically exactly your set up on MD.net ).

 

coachagon.dev%2C%20screenshot%2C%20menu%

 

coachagon.dev%2C%20screenshot%2C%20menu%

 

coachagon.dev%2C%20screenshot%2C%20menu%

 

On a side note, how do you add the icon next to 'Downloads' on MD.net and the 'NEW' orange text for some main menu items.

 

Thank you so much for what you do and the support you provide.



#13 Alexander Gonzalez

Alexander Gonzalez

    Member

  • + Legacy Member
  • PipPip
  • 19 posts

Posted 13 March 2017 - 05:36 PM

I was able solve the problem ( i simply copied the above css and looked for the instances where it said 'main-menu' and changed it to 'header-menu' and it worked, i think i may have duplicate code though  :huh:

 

However the underlines are still present, how do i remove them?



#14 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 13 March 2017 - 05:42 PM

Thanks for providing more info Alexander, I know we can get this resolved! The screenshots you posted are linking to your local site so only you can see them here I'm afraid (they show as broken images to me).

 

Since your site is local, here's what we can do instead:

 

Send me your child theme as it is and I'll load it up to a test site of my own so I can see exactly what's going on. I'll also use the information you've posted above to find an answer.

 

Thanks a lot for working with me through this! One of these days MD will have built-in design options for this kind of thing so it'll be less of a headache.

 

-----

 

Next, to get icons and badges in your menu, you can paste HTML like so in your nav menu items:

 

User icon (see more built-in MD icons || see screenshot)

<i class="md-icon-user"></i>  Menu text

Badge (see screenshot)

Same deal as above, just different code:

Menu text <span class="badge">New!</span>

- Alex
Check out the Kolakube blog or follow me on Twitter.

#15 Alexander Gonzalez

Alexander Gonzalez

    Member

  • + Legacy Member
  • PipPip
  • 19 posts

Posted 14 March 2017 - 08:08 AM

Thank you.  

 

i'll send child theme to you now.



#16 Alexander Gonzalez

Alexander Gonzalez

    Member

  • + Legacy Member
  • PipPip
  • 19 posts

Posted 14 March 2017 - 08:38 AM

Alex,

 

how do i send you the child theme?



#17 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 14 March 2017 - 01:17 PM

Once you download the child theme, zip it up and you can either attach it to a private message here on the forums or email it to me: alexfrais[at]gmail.com.


- Alex
Check out the Kolakube blog or follow me on Twitter.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users