Support » Theme: Emphasize » Edit the appearance and location of main menu

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Shaped Pixels

    (@shaped-pixels)

    Unfortunately I won’t be able to provide customization services or support, but I can point you to the CSS that controls the complete styling for the Emphasize menu.

    In the parent theme’s style.css, the menu styling starts around line 2124 and with this:

    /*————————————————————–
    17.4 Primary Menu
    ————————————————————–*/

    Then it ends around 2370…just before this:

    /*————————————————————–
    18.0 Media Queries
    ————————————————————–*/

    Then, the header.php file is where you will find the complete HTML and PHP code that structures the menu containers:

            <nav id="site-navigation" class="site-navigation primary-navigation" role="navigation">
                <div class="toggle-container visible-xs visible-sm hidden-md hidden-lg">
                  <button class="menu-toggle"><?php esc_html_e( 'Menu', 'emphasize' ); ?></button></div>
                
                <?php if ( has_nav_menu( 'primary' ) ) {																			
                        wp_nav_menu( array( 							
                            'theme_location' => 'primary', 
                            'menu_class' => 'nav-menu'
                                                        
                        ) ); } else {
                    
                        wp_nav_menu( array(															
                            'container' => '',
                            'menu_class' => '',
                            'title_li' => ''							
                            ));							
                       } 
                    ?>                    
              </nav> 
              </div>

    Looking at the menu you want to copy the design and style of, you will have a lot of work involved to recreate it, which means adapting the CSS and HTML from the other site into the Emphasize one. You can still use the default menu styling, although it won’t be exact, you can still use the colours by taking advantage of the customizer colour settings for the menu.

    To completely remove (or cancel out) the default styling, you would need to change the CSS classes and/or ID’s of the menu for your child theme to use your own custom styling. This includes using the new classes and ID’s in the header.php file.

    • This reply was modified 4 years, 3 months ago by Shaped Pixels.

    Thank you very much for your response. I will take a good look and see if I can edit.

    Is it possible for me to actually use the code I have from my static sight? It involves a javascript file, a css file, and the html coding. Could I substitute the PHP coding in the header file adapting for style sheet differences?

    My question would be, were do I store the custom javascript file and custom css file?

    Also, will he subheading plugin work with emphasize?

    Theme Author Shaped Pixels

    (@shaped-pixels)

    Sorry for late reply back….You might be able to use the actual code from the site, although there still might be some adjustments. The thing is, WordPress creates some of the menu code dynamically, so that might be a bit of a problem.

    Where to store the js and css files will be in the js and css folders of the theme. In this case, it MUST be a child theme. I say child theme because whenever you modify (customize) a theme, always use a child theme so that whenever the parent theme (in this case Emphasize) has an update, you don’t lose your custom changes.

    I’m not familiar with the subheading plugin, but you won’t know unless you try it.

    Overall, I have to be honest that what you are wanting to do, sounds like completely rebuilding the menu, including styling, so this is definitely not a small job. I’m not sure what your level of coding experience is, but you really should be comfortable with code to do this level of modification.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Edit the appearance and location of main menu’ is closed to new replies.