WordPress.org

Ready to get started?Download WordPress

Forums

Add a new menu item in header (23 posts)

  1. durph09
    Member
    Posted 1 year ago #

    I've created a few new pages and would like to add links to my header menu to those pages. I am using a theme that did not use menus from the wordpress dash board. I'll include the code and my site is seomagiconline.org.

    Header code

    <div id="menu">
    				<a>" title="Home" id="menu_home"></a>
    				<a>" title="About Us" id="menu_about"></a>
    				<a>" title="F.A.Q" id="menu_faq"></a>
    				<a>" title="Privacy " id="menu_privacy"></a>
    
    <a>" title="Content/Design" id="menu_privacy"></a>
    
    </div>

    [Moderator Note: Please post code or markup snippets between backticks or use the code button. As it stands, your code has been permanently damaged/corrupted by the forum's parser.]

    This is the css:

    #menu {
    	float: left;
    	width: 800px;
    	margin: 20px 0px 0px 60px;
    }
    
    #menu_home,#menu_about,#menu_faq,#menu_privacy {
    	float: left;
    	height: 38px;
    	width: 106px;
    	#margin-right: 2px;
    	background: url('images/menu_home.png') no-repeat;
    }
    
    #menu_about {
    	#width: 90px;
    	background: url('images/menu_about.png') no-repeat;
    }
    
    #menu_faq {
    	#width: 71px;
    	background: url('images/menu_faq.png') no-repeat;
    }
    
    #menu_privacy {
    	#width: 153px;
    	background: url('images/menu_privacy.png') no-repeat;
    }
    
    #menu_home:hover,#menu_about:hover,#menu_faq:hover,#menu_privacy:hover {
    	background-position: 0px -40px;
    }

    Again I would like to add more menu items, three actually. I know I can do this by copying and pasting '" title="Home" id="menu_home">' but them I just get a repeat link to the home page.

    would really appreciate any help.
    Thanks

  2. deepbevel
    Member
    Posted 1 year ago #

    maybe try:

    <a>" title="New Page" id="new_page"></a>

    with new_page being the page id of your page, and "New Page" being the title. But obviously, call it what you like, just make sure the values match what you have.

  3. durph09
    Member
    Posted 1 year ago #

    I apologize I'm new but what where would I find the page ID. Also I see that my code got cut off. THis is the code in the header for each link:

    " title="Home" id="menu_home">'

    Do I have to alter the CSS to create a new menu_ID

    Thanks for all the help

  4. durph09
    Member
    Posted 1 year ago #

    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="Home" id="menu_home"></a>

  5. deepbevel
    Member
    Posted 1 year ago #

    I think the id= is the page slug.
    the permalink uses the slug, so it will be the same as what you will use, it's normally just the page title with underscores.

    if your page is called "My Page" the slug would be my_page, like this:

    <a>" title="My Page" id="my_page"></a>
  6. durph09
    Member
    Posted 1 year ago #

    I can't get it to work for me. My permalinks has - between it. I've tried both ways. Do I need to do something to the CSS?

  7. deepbevel
    Member
    Posted 1 year ago #

    hmm, do you have access to the page slug in the post editor? it's available through a widget via screen options tab at the top right.

    It's odd though, the way it says "id=" but then has no page id number, so I was thinking the slug could work. Otherwise maybe try the actual page id number. You'll see it in the url for the page editor.

    If none of this works, I'm stumped because I don't understand enough about what makes your menu work, much less why it doesn't :(

  8. durph09
    Member
    Posted 1 year ago #

    No luck. THank you for all of your help. I am almost thinking that title and id refer to the css coding. When I change title of any of the existing menu buttons the button does not change at all

  9. durph09
    Member
    Posted 1 year ago #

    Well I figured out how to change the destination.
    <a href="<?php echo esc_url( home_url( '/about-us' ) ); ?>" title="About Us" id="menu_about"></a>

    By changing ( '/about-us' ) to the page slug it changes destination. Now I have to figure our how to change the writing inside the button. I've changed the title="" and nothing happens. What exactly is the title, does anyone one know?

    The worst part about all of this is that I have done it before and I can't remember how

  10. deepbevel
    Member
    Posted 1 year ago #

    post a link
    it could be that your menu text is an image.

  11. durph09
    Member
    Posted 1 year ago #

    http://seomagiconline.org

    In the menu you will see two extra 'Privacy Policy' links and one extra FAQ link. I've gotten these by copying the code for them but I'm trying to change the wording inside of them. The last FAQ is directed to a different destination. Which I was able to just do but I am unable to change that it says FAQ

  12. deepbevel
    Member
    Posted 1 year ago #

    yep, I saw the .png image in Firebug, Your text is part of an image. You'll have to make a new one for any new pages you make.
    #menu_faq {
    background: url("images/menu_faq.png") no-repeat scroll 0 0 transparent;
    }
    `

  13. deepbevel
    Member
    Posted 1 year ago #

    does your theme have a built in way to do that? I've never heard of a menu like this before.. is this a custom or premium theme?

  14. durph09
    Member
    Posted 1 year ago #

    I was afraid of that thanks for all of your help. Any ideas how I can do this. I do have access tot he picture but I need a program to edit it.

  15. durph09
    Member
    Posted 1 year ago #

    its custom. I bought it.

  16. deepbevel
    Member
    Posted 1 year ago #

    it's not hard, just a pain compared to the normal way. All you do is add the new image to the folder called "images" in your theme folder, and title it so your code will find it. You'll have to ftp or use control panel on your server.

  17. durph09
    Member
    Posted 1 year ago #

    Any ideas how I can edit it after I down load it, or should I just create a new one?

  18. deepbevel
    Member
    Posted 1 year ago #

    weird it would come with a fixed menu, but I suppose that could make it easier if you don't have to change or add any pages.. which seems unlikely. Oh well, go figure..

  19. deepbevel
    Member
    Posted 1 year ago #

    I'd probably create all new images, it will be easier than trying to match. You should be able to edit the px width via css, you can see examples in the css you posted.

  20. deepbevel
    Member
    Posted 1 year ago #

    this is the part which controls the size of each menu button

    #menu_home, #menu_about, #menu_faq, #menu_privacy {
        background: url("images/menu_home.png") no-repeat scroll 0 0 transparent;
        float: left;
        height: 38px;
        width: 106px;
    }

    So if you change the images and adjust the path and titles in this code, it should work.

    So far I'm not sure what the css for each item is doing to the size .. maybe nothing.

  21. deepbevel
    Member
    Posted 1 year ago #

    for example,

    #menu_faq {
    	#width: 71px;
    	background: url('images/menu_faq.png') no-repeat;
    }

    "#width: 71 px" does not show up in firebug. So I'm not sure what it's doing.

    rather, it just looks like:

    #menu_faq {
        background: url("images/menu_faq.png") no-repeat scroll 0 0 transparent;
    }
  22. durph09
    Member
    Posted 1 year ago #

    Alright. THanks for everything. I owe you one

  23. deepbevel
    Member
    Posted 1 year ago #

    You're welcome, and i'll probably hit you up. I'm just a hack who's persistent and seems to get lucky often. Carry on!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags