WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Editing/defining Nav_menu - issues (7 posts)

  1. HrRinger
    Member
    Posted 10 months ago #

    Hello, I am fairly new to WP (used it a long time ago for a personal blog, but that's about it) but familiar with writing websites purely in HTML and am having a bit of a time switching over to WP.

    Here's our site - mercurymosaics.com

    That being said last time I was working on the page I got the "commercial" page added but in my infinite wisdom did not write down where I edited it (in the editor). Now I am attempting to define a menu Id, so I can add an icon to the commercial link on the nav bar.

    The current code says

    <div class="nav_holder"><div class="nav"><ul id="menu-main-navigation" class="menu"><li id="menu-item-2101" class="products_icon menu-item menu-item-type-post_type menu-item-object-page menu-item-2101"><a href="http://www.mercurymosaics.com/products/">Products</a></li>
    <li id="menu-item-2096" class="installations_icon menu-item menu-item-type-post_type menu-item-object-page menu-item-2096"><a href="http://www.mercurymosaics.com/gallery/">Gallery</a></li>
    <li id="menu-item-6691" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6691"><a href="http://www.mercurymosaics.com/commercial/">Commercial</a></li>
    <li id="menu-item-2098" class="story_icon menu-item menu-item-type-post_type menu-item-object-page menu-item-2098"><a href="http://www.mercurymosaics.com/learn-more/">Learn More</a></li>
    <li id="menu-item-2097" class="classes_icon menu-item menu-item-type-post_type menu-item-object-page menu-item-2097"><a href="http://www.mercurymosaics.com/mosaic-classes/">Mosaic Classes</a></li>
    <li id="menu-item-2100" class="blog_icon menu-item menu-item-type-post_type menu-item-object-page menu-item-2100"><a href="http://www.mercurymosaics.com/blog/">Blog</a></li>
    <li id="menu-item-2099" class="contact_icon menu-item menu-item-type-post_type menu-item-object-page menu-item-2099"><a href="http://www.mercurymosaics.com/contact/">Contact</a></li>
    </ul></div></div><!--End nav_holder-->
    <div class="clear"></div>
    </div><!--End header-->

    I want it to be

    <div class="nav_holder"><div class="nav"><ul id="menu-main-navigation" class="menu"><li id="menu-item-2101" class="products_icon menu-item menu-item-type-post_type menu-item-object-page menu-item-2101"><a href="http://www.mercurymosaics.com/products/">Products</a></li>
    <li id="menu-item-2096" class="installations_icon menu-item menu-item-type-post_type menu-item-object-page menu-item-2096"><a href="http://www.mercurymosaics.com/gallery/">Gallery</a></li>
    <li id="menu-item-6691" class="commercial_icon menu-item-type-post_type menu-item-object-page menu-item-6691"><a href="http://www.mercurymosaics.com/commercial/">Commercial</a></li>
    <li id="menu-item-2098" class="story_icon menu-item menu-item-type-post_type menu-item-object-page menu-item-2098"><a href="http://www.mercurymosaics.com/learn-more/">Learn More</a></li>
    <li id="menu-item-2097" class="classes_icon menu-item menu-item-type-post_type menu-item-object-page menu-item-2097"><a href="http://www.mercurymosaics.com/mosaic-classes/">Mosaic Classes</a></li>
    <li id="menu-item-2100" class="blog_icon menu-item menu-item-type-post_type menu-item-object-page menu-item-2100"><a href="http://www.mercurymosaics.com/blog/">Blog</a></li>
    <li id="menu-item-2099" class="contact_icon menu-item menu-item-type-post_type menu-item-object-page menu-item-2099"><a href="http://www.mercurymosaics.com/contact/">Contact</a></li>
    </ul></div></div><!--End nav_holder-->
    <div class="clear"></div>
    </div><!--End header-->

    I grabbed the above code from the "view source" on main page. When I view the "header" in the editor - not there. Also the "sub_nav" doesn't appear to have it. I swear it was in the header before this last update.. but maybe not. Anyway...I'm uncertain of 2 things -
    1. Where do I actually edit this code? (in the editor preferably, but if I have to use a "visual" method fine)
    2. How to define this item (cant find where the menu-item-6691 is actually defined), additionally where to upload the commercial Icon to. I have it in my gallery right now, but unsure on this.

    Anyway, I've searched around on google and WP and still not finding an answer. (might be I'm using the wrong key-words or maybe not)

    What I really want to do is have this icon
    http://www.mercurymosaics.com/wp-content/uploads/2013/10/commercial-icon-03.jpg
    as the icon for the commercial page - instead of the blank spot that's there now.

    Thank you in advance for your assistance.

  2. Keith Driscoll
    Member
    Posted 10 months ago #

    In WordPress we edit the PHP code in our 'theme' files and NEVER the core WordPress files. The code you see in your browser is the HTML that was generated by PHP - a server side programming language and the language that WordPress is written in. I would suggest reading a book or blog on PHP programming basics and then it will be easier to understand WordPress. If you think HTML is cool wait till you see what can be done with PHP :)

    Welcome to WordPress!

  3. HrRinger
    Member
    Posted 10 months ago #

    Thank you for the response.
    I do have a bit of familiarity with php, and can certainly read a book or blog on it. I am just uncertain where to edit this menu in the first place - as i said I simply want to add an icon as with the other menu items.

  4. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

    Those icons are set in the CSS code - and you can use the existing CSS menu item specific class to add another one - try adding this to your CSS:

    .menu-item-6691 {
        background-image: url("http://www.mercurymosaics.com/wp-content/uploads/2013/10/commercial-icon-03.jpg");
    }
  5. HrRinger
    Member
    Posted 10 months ago #

    Thanks a lot for the reply. That makes sense.
    One question. Here's my css...

    /******************************************************************
    Theme Name: xxx
    Theme URI: xxx
    Description: xxx
    Author: xxx
    Author URI: xxx
    Version: xxx
    
    ******************************************************************/
    
    /*
    Dark Blue - 6A747B
    Green - AEBD46
    Brown - 58454F
    Light Blue - 8DAEA2
    */
    
    .wrap {
    	position:relative;
    	margin:0 auto;
    }
    #sticky_wrap {
    	overflow:auto;
    	padding-bottom:250px;
    } /* Same height as footer */
    .clear {
    	clear:both;
    }
    #container {
    	min-height: 100%;
    }
    
    .page_copy img, .page_copy iframe{
    	max-width:100%;
    	height:auto;
    }
    
    /*************************************************\
    |
    |             HEADER
    |
    /*************************************************/
    
    #header {
    
    }
    
    .nav li a{
    
    }
    
    .nav li a:hover{
    
    }
    
    .nav li a:active{
    
    }
    
    .nav li.current-menu-item a,
    .nav li.current-page-ancestor a,
    .nav li.current-post-ancestor a {
    
    }
    
    /*************************************************\
    |
    |              FOOTER
    |
    /*************************************************/
    
    #footer {
    	position: relative;
    	margin-top: -250px; /* negative value of footer height */
    	height: 250px;
    	clear:both;
    	background-image:url(library/images/bubbles_footer_2.jpg);
    	background-repeat: repeat-x;
    	background-position: 75% top;
    }
    
    .client_login a{
    	display:inline-block;
    	font-size:12px;
    	background-color:#999;
    	padding: 8px 15px 8px 15px;
    	margin-top:8px;
    	-webkit-border-radius: 4px;
    	-moz-border-radius: 4px;
    	border-radius: 4px;
    	-webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.4);
    	-moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.4);
    	box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.4);
    
    }
    
    .client_login a:active{
    	-webkit-box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.8);
    box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.8);
    }
    
    /*************************************************\
    |
    |             COPY FORMATTING
    |
    /*************************************************/
    
    p{
    	margin-bottom:14px;
    }
    
    em{
    	font-style:italic;
    }
    
    strong{
    	font-weight:bold;
    }
    
    .text-left {
    	text-align: left;
    }
    .text-center {
    	text-align: center;
    }
    .text-right {
    	text-align: right;
    }
    /* highlighting search term on search page */
    mark, .search-term {
    	background: #EBE16F;
    
    }
    
    ul{
    	list-style:none;
    }
    
    .image_number{
    	position:absolute;
    	left:0px;
    	bottom:0px;
    	padding:5px 5px 0px 0px;
    	background-color:#FFF;
    	z-index:50;
    	font-size:10px;
    }
    
    /*************************************************\
    |
    |              LINK STYLES
    |
    /*************************************************/
    
    a, a:visited {
    	color: #8DAEA2;
    	text-decoration:none;
    }
    a:hover, a:focus {
    	color: #8DAEA2;
    }
    a:active {
    } /* on click */
    a:link {
    	-webkit-tap-highlight-color : rgba(0,0,0,0); /* this highlights links on Iphones / iPads */
    }
    
    a:hover{
    	color:#6A747B;
    }
    
    #content a img{
    	opacity:1;
    	-webkit-transition: opacity .2s linear;
    }
    
    #content a img:hover{
    	opacity:0.8;
    	-webkit-transition: opacity .3s ease;
    }
    
    /*************************************************\
    |
    |              H!, H2, STYLES
    |
    /*************************************************/
    
    h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
    	font-family:'Gotham-Rounded',sans-serif;
    	font-weight: normal;
    	color:#6A747B;
    }
    h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a {
    	text-decoration: none;
    }
    
    /*************************************************\
    |
    |              FORM STYLES
    |
    /*************************************************/
    
    .gform_button{
    	position:absolute;
    	right:15px;
    	bottom:15px;
    	background-color:#6A747B !important;
    	color:#FFF !important;
    	display:block;
    	padding:8px 12px 8px 12px !important;
    	background:#6A747B;
    	font-size:14px !important;
    	font-family:'Gotham-Rounded',sans-serif !important;
    	color:#FFF !important;
    	-webkit-border-radius: 4px;
    	-moz-border-radius: 4px;
    	border-radius: 4px;
    	margin-top:-15px !important;
    	border: none !important;
    }
    
    .gfield_label{
    	font-weight:normal !important;
    }
    
    .gform_button:hover{
    	background:#8DAEA2 !important;
    }
    
    input, textarea{
    	padding:10px !important;
    	font-size:14px !important;
    	-webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    	border:1px solid #CCC !important;
    }
    
    /*************************************************/
    |
    |              Class page styling
    |
    /*************************************************/
    .signup_button {
    	background-image: url('images/sign-up-for-classes-01.png');
    }
    
    .signup_button:hover {
    	background-image: url('images/sign-up-for-classes-03.png');
    }
    
    /*************************************************/
    |
    |              Images and captions
    |
    /*************************************************/
    .aligncenter, img.aligncenter {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    }

    Am I just blind? I am not seeing where to put your aforementioned post.

    (note I removed some of the data at the top. so it's not actually "xxx"

  6. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

    The other ones are in this file:

    http://www.mercurymosaics.com/wp-content/themes/MercuryMosaics/library/css/wide_desktop.css

    So that's probably the best place to put it - I'm not sure how all that theme is coded for different devices - so see if adding it there makes it behave properly.

  7. HrRinger
    Member
    Posted 9 months ago #

    That worked great - thanks all for your help.
    As you can see on our site the cute little icon is up :) (and now put in the proper place now too)

Reply

You must log in to post.

About this Topic