Making a Custom Menu Title a Link

  • Author
  • #1499125


    Is there a way to make the title of a custom menu a live link that will take you back to the parent page?

    I.e. can I just have the title be my link to my parent page rather than having to add a menu item to navigate back to that page?

    I can’t find a way to do this without CSS so I’m hoping there might be a CSS code to do so.


    The blog I need help with is


    Hi, is what you are wanting, as an example, is to have the title on the “Rites of Passage” page go back to Ministry?



    Yes, but Rites of Passage is a tricky one b/c it will have it’s own custom menu.

    A better example is Writing:

    I have rigged the menu with a link to the main Writing page at the bottom of the writing menu, but could the title of the menu be a live link to take you back to the main Writing page?

    Thanks so much for your help!


    There isn’t a way to create links in CSS as it is just a styling document, however, what about getting rid of the custom menu widget title at Appearance > Widgets and then include the link to “Writing” as the top entry on that menu. You can then style that top menu item differently to match the style of a menu widget title.

    Add the following to your existing CSS, at the bottom, and then go back to your custom menu, open the “Writing” menu item and in the CSS classes section, add mlj-menu and save the menu. In the second rule below, you will have to change the XX to the actual number for the “Writing” menu item. You can find this by looking at your source code (view source in browser) or my using your browser’s web inspector.

    .mlj-menu {
    	font-family: calluna-1, calluna-2, 'Raleway', "Helvetica ;Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
    	font-style: normal;
    	font-weight: 700;
    	font-variant: normal;
    	color: #CC0000;
    	font-size: 21px;
    .menu-item-XX a {
    	color: #2A2A2A;

    If you have any problems or questions, you know where we are. :)



    Perfect! The only thing I don’t understand is:

    In the second rule below, you will have to change the XX to the actual number for the “Writing” menu item.

    I don’t see an XX and without doing this, it’s working perfectly just the way I wanted.

    Am I missing something?

    Thank you so much!!



    This rule,

    .menu-item-XX a {
    	color: #2A2A2A;

    Was to turn the text to the same color that had been used as the widget title. You can remove it if you are fine with the blue color of the link since it isn’t doing anything as it is with the wrong menu item ID number in it.

    If you want it to be the darker color, you have to replace the XX I had with the actual menu item ID number for that specific menu entry, which is 412, so it would look like this.

    .menu-item-412 a {
    	color: #2A2A2A;


    got it. thanks so much. i really appreciate the help and your ease of teaching!



    You are welcome.

The topic ‘Making a Custom Menu Title a Link’ is closed to new replies.