[Audun]

Hi,
I want to change the hover color of the Header Top Menu in the Rock Star theme used at http://nyside.farsk.no/ to the following hex number: #f9a21f
However, I don’t have an option to change the color of the Header Top Menu in the Color Options menu under Customization. Can you please provide me with the needed CSS code?

In addition I want to change the text of the menu-button that appears in tablets/smartphone “Menu” into my own language “Meny”. I can’t find the spot to change this. Can you please advice me on this?

Thanks,
Audun

[Mahesh]

@audun: Go to Dashboard=> Appearance=> Customize=> Additional CSS box and add the following CSS:

.main-navigation a {
    color: #f9a21f;
}

For Meny text, you’ll need to create a child theme. You can find more details on creating child theme HERE. Then in your child theme’s functions.php, add the following codes:

function rock_star_primary_menu() {
	?>
    <button id="menu-toggle" class="menu-toggle"><?php _e( 'Meny', 'rock-star' ); ?></button>

    <div id="site-header-menu" class="site-header-menu">
        <nav aria-label="<?php esc_html_e( 'Primary Menu', 'rock-star' ); ?>" role="navigation" class="main-navigation" id="site-navigation">
            <div class="menu-main-menu-container">
                <?php
                    if ( has_nav_menu( 'primary' ) ) {
                        $rock_star_primary_menu_args = array(
                            'theme_location'    => 'primary',
                            'menu_class'        => 'menu nav-menu',
                            'container'         => false
                        );
                        wp_nav_menu( $rock_star_primary_menu_args );
                    }
                    else {
                        wp_page_menu( array( 'menu_class'  => 'menu nav-menu' ) );
                    }
                ?>
            </div><!--end menu-main-menu-container-->
         </nav><!--end main-navigation-->
    </div><!-- .site-header-menu -->
    <?php
}

Regards,
Mahesh

[Audun]

Hi Mahesh,

Thanks for your quick response!

But I think you misunderstood my question; it’s the hover color of the main menu I want to change. And regarding the menu text; is it possible to use a symbol, typically three horizontal lines, instead of the menu text-box? This is language independant.

And a last question; what is the preferred image size of a logo for this theme?

Could you look into this, please?
Thanks,
Audun

[Audun]

Hi again, I found a solution for the hover color in the forum:

.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation li:hover > a, .main-navigation li.focus > a {
color: #f9a21f;
}

I have to rephrase my questions:
1. How can I also change the site-title hover color? For this I want it to turn into white instead of red.
2. I still want to know whether it’s possible to have a symbol-menu-box instead of the text-menu-box that appears on smaller devices.
3. What is the preferred image size of a logo for this theme?

Thanks again,
Audun

[Mahesh]

@audun:
1. How can I also change the site-title hover color? For this I want it to turn into white instead of red.

.site-title a:hover, .site-title a:focus {
    color: rgb(255, 255, 255);
}

2. I still want to know whether it’s possible to have a symbol-menu-box instead of the text-menu-box that appears on smaller devices.
Add the following code in your child theme’s functions.php.

function rock_star_primary_menu() {
	?>
    <button id="menu-toggle" class="menu-toggle genericon genericon-menu"><?php _e( '', 'rock-star' ); ?></button>

    <div id="site-header-menu" class="site-header-menu">
        <nav aria-label="<?php esc_html_e( 'Primary Menu', 'rock-star' ); ?>" role="navigation" class="main-navigation" id="site-navigation">
            <div class="menu-main-menu-container">
                <?php
                    if ( has_nav_menu( 'primary' ) ) {
                        $rock_star_primary_menu_args = array(
                            'theme_location'    => 'primary',
                            'menu_class'        => 'menu nav-menu',
                            'container'         => false
                        );
                        wp_nav_menu( $rock_star_primary_menu_args );
                    }
                    else {
                        wp_page_menu( array( 'menu_class'  => 'menu nav-menu' ) );
                    }
                ?>
            </div><!--end menu-main-menu-container-->
         </nav><!--end main-navigation-->
    </div><!-- .site-header-menu -->
    <?php
}

3. What is the preferred image size of a logo for this theme?
There is no specific size for logo, you can use any size of logo as desired.

Regards,
Mahesh

[Author]

Posts