Removing Menu Icons

Hello there,

Default menu is always in the header.php file of a wordpress theme.

Can you please Provide me link to your website, so that I can guide you further.

Cheers,
Rushang Chauhan

My site is hosted locally on my computer. I am new to WordPress and theme customization (obviously).

This is what the header.php file looks like from the Montezuma theme…

<div id="banner-bg" class="cf">
	<div id="banner" class="row">
		<div id="logo-area" class="col5">
			<<?php bfa_if_front_else( 'h1', 'h3' ); ?> id="sitetitle">
				<a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a>
			</<?php bfa_if_front_else( 'h1', 'h3' ); ?>>
			<p id="tagline"><?php bloginfo( 'description' ); ?></p>
		</div>
		<?php wp_nav_menu( array(
			'container' => 'nav',
			'container_class' => 'menu-wrapper col7',
			'container_id' => 'menu1-wrapper',
			'menu_id' => 'menu1',
			'menu_class' => 'cf menu',
			'theme_location' => 'menu1',
			'fallback_cb' => 'bfa_page_menu'
		) ); ?>
	</div>
</div>

<!--<a href="<?php bloginfo( 'rss2_url' ); ?>" class="rsslink" title="<?php _e( 'Subscribe to RSS Feed', 'montezuma' ); ?>"></a> -->

<!--<div id="breadcrumbs1-bg">
	<nav id="breadcrumbs1" class="breadcrumbs lw">
		<?php bfa_breadcrumbs( 'breadcrumbs1' ); ?>
	</nav>
</div> -->

(I commented out the RSS and breadcrumbs. Unrelated.)

#menu1 > li > a > i {background: none !important;}

Put this code in your style.css file and it should work.

If you still face any problems feel free to ask.

Cheers,
Rushang Chauhan

I just found that the icons were added via Javascript in one of the .js files and was able to remove them that way. Thank you for your help!

First of all, you should not make any changes to the theme’s files, so don’t make any change to the .js files. If you upgrade the theme in the future, your changes will be lost.

Second, if you’re going to make a change to the CSS, with Montezuma you do it through the virtual CSS files. Unlike other themes, editing the style.css file will not work because it gets overwritten each time you make a change to (and save) the virtual CSS files.

The way to remove the menu icons is to do it through CSS. If you go to Appearance > Montezuma Options > CSS Files > menus_menu1.css, you’ll see this section, which are the rules that display the menu icons:

/* The <i> tag are inserted with Javascript.
The <i> tags allows adding background images from a "sprite" image =
background-image with  */
#menu1 > li > a > i {
	display:	block;
	width: 		24px;
	height: 	24px;
	margin: 	0 auto 5px auto;
	background: 	transparent url(%tpldir%/images/menu-icons-0090d3.png) 0 0 no-repeat;
}

#menu1 > li:hover > a > i {
	background: 	transparent url(%tpldir%/images/menu-icons-0090d3.png) -24px 0 no-repeat;
}

I would either remove those rules, or comment them out.

You can also add @rushang’s CSS rule to the end of the various.css file, but leave off the !important clause. You should very rarely have to use !important in your CSS if you understand CSS specificity, and overusing or misusing it will just cause problems later.