WordPress.org

Forums

Suits
[resolved] How to change id or class in html (8 posts)

  1. a.scaltritti
    Member
    Posted 1 year ago #

    Hi,
    I'm pretty new in WordPress and it seems great.

    Unluckly I can't find out how to edit the XHTML code. (I can't find it!)
    I have a menu bar with the classic Home, Products, Contacts drop-down menus.
    I wolud to change the color in my "Contacts" button.
    So I should find out something as:

    < ul >
    < li >Home</ li >
    < li >Products</ li >
    < li >Contacts </ li >
    </ ul >

    After I should add a class or an id to my Contacts button so I can make it background-color: #ff0000; in my .css file.

    But I can't find out the code! I mean, where is specified the
    - li - or - td - code?
    Thanks a lot!

    Alessandro

  2. Josh Stauffer
    Member
    Posted 1 year ago #

    Hi Allessandro,

    Can you provide a link? If you are using Chrome you can use the Chrome Developer Tools to inspect the element. Just right click on the element and select "Inspect Element" to find the class or id.

  3. a.scaltritti
    Member
    Posted 1 year ago #

    Sorry, I can't provide the link.
    I don't need to find out the class or id but I need to change it.
    So, basically, I would find where HTML tags are in the WordPress docs to change them.
    I have a folder with all php and css file but I can't find the html code of the drop down menu.

  4. Marvel Labs
    Member
    Posted 1 year ago #

    Hey Allessandro,

    The html webpage is built using several php and css files. If you want to change the design of the menu, you can customize your header.php file.

    Marvel Labs

  5. a.scaltritti
    Member
    Posted 1 year ago #

    Yep, but in header.php there is not something like:
    < ul >
    < li >Home</ li >
    < li >Products</ li >
    < li >Contacts </ li >
    </ ul >

    It's just:
    <div id="page" class="hfeed site">
    <header id="masthead" class="site-header" role="banner">
    " title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
    <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
    <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>

    <div id="navbar" class="navbar">
    <nav id="site-navigation" class="navigation main-navigation" role="navigation">
    <h3 class="menu-toggle"><?php _e( 'Menu', 'suits' ); ?></h3>
    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    <?php get_search_form(); ?>
    </nav><!-- #site-navigation -->
    </div><!-- #navbar -->
    </header><!-- #masthead -->

    <div id="main" class="site-main">

    I can't understan it, sorry.

  6. Jesin A
    Member
    Posted 1 year ago #

    You don't have to edit a single line of code for this. Go to Appearance > Menus, click screen options on the top right, check CSS Classes.

    Under Menu Structure expand the menu and fill in your class names in the CSS Classes (optional) field.

  7. a.scaltritti
    Member
    Posted 1 year ago #

    Thanks @Jesin A!
    Exactly what I was looking for.

  8. Jesin A
    Member
    Posted 1 year ago #

    You're welcome!

    That's the specialty of WordPress, you can do so many things without touching the code.

    If that answers your question please mark this topic as resolved.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic