[Support request] CSS for Custom Menu

Home Forums Support [Support request] CSS for Custom Menu

Home Forums Support CSS for Custom Menu

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #1618583
    Jennifer

    Hi Tom,

    I tried those two websites but it is conflicting with Gravity View. Can you help me align the custom menu to the right and drop down css code for the custom menu I have added.

    Here is how I would like it to look
    https://crm.uslawpros.com/wp-content/uploads/2021/01/dropdownmenu.png

    This is how it currently looks ๐Ÿ™
    https://crm.uslawpros.com/wp-content/uploads/2021/01/dropdownmenu2.png

    ———————————————————————–
    ———————————————————————–

    Here is my original message from this topic https://generatepress.com/forums/topic/add-third-navigation-menu-gpp-1-8/
    Hi Tom,

    I added this custom menu to my website as well. Can you help me with the custom coding on drop down menus. I have all the coding listed here. Any help would be appreciated, thank you.

    —————————————-
    Added custom code to functions.php
    —————————————-

    /*from WPBeginner add custom menus https://www.wpbeginner.com/wp-themes/how-to-add-custom-navigation-menus-in-wordpress-3-0-themes/*/
    function wpb_custom_new_menu() {
      register_nav_menus(
        array(
          'billing-menu' => __( 'Billing Menu' ),
          'legalsec-menu' => __( 'Legal Sec Menu' )
        )
      );
    }
    add_action( 'init', 'wpb_custom_new_menu' );
    

    —————————————–
    Added this code as a hook element
    —————————————–

    <style>.third-navigation ul {
        list-style-type: none;
        margin: 0;
    }
    
    .third-navigation ul {
        display: flex;
        justify-content: center;
    }
    
    .third-navigation .menu > li:nth-child(2) {
        margin-right: 200px;
    }
    
    .third-navigation a {
        padding: 0 20px;
        line-height: 40px;
        color: #a51c30;
    }</style>
    <div class="third-navigation">
        <?php wp_nav_menu( array( 'theme_location' => 'billing-menu' ) ); ?>
    </div>
    

    —————————–
    Here is what it looks like. Can you help me create dropdown menus?
    —————————–
    https://crm.uslawpros.com/wp-content/uploads/2021/01/GPnewmenu1.png
    https://crm.uslawpros.com/wp-content/uploads/2021/01/GPnewmenu2.png

    Thank you

    Jennifer
    Living His Word Ministries, Inc.
    www.livinghisword.org

    #1618588
    Jennifer

    Here is the css code I have so far the custom menu

    	.MenuWrap{
    background-color:#353535;
    width:100%
    }
    .third-navigation a {
      text-decoration: none;
    }
    
    .third-navigation nav {
    	background-color:#353535;
    width:100%
    }
    
    .third-navigation ul {
      background: darkorange;
    	list-style: none;
    	margin: 0;
    	padding-left: 0;
    }
    
    .third-navigation li {
    	color: #fff;
      background: #353535;
    	display: block;
    	float: left;
    	padding: 1rem;
    	position: relative;
    	text-decoration: none;
      transition-duration: 0.5s;
    }
      
    .third-navigation li a {
      color: #fff;
    }
    
    .third-navigation li:hover,
    .third-navigation li:focus-within {
    	background: red;
    	cursor: pointer;
    }
    
    .third-navigation li:focus-within a {
      outline: none;
    }
    
    .third-navigation ul li ul {
    	background: orange;
    	visibility: hidden;
      opacity: 0;
      min-width: 5rem;
    	position: absolute;
      transition: all 0.5s ease;
      margin-top: 1rem;
    	left: 0;
      display: none;
    }
    
    .third-navigation ul li:hover > ul,
    .third-navigation ul li:focus-within > ul,
    .third-navigation ul li ul:hover,
    .third-navigation ul li ul:focus {
       visibility: visible;
       opacity: 1;
       display: block;
    }
    
    .third-navigation ul li ul li {
    	clear: both;
      width: 100%;
    }
    

    Jennifer
    Living His Word Ministries, Inc.
    www.livinghisword.org

    #1618747
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to where i can see the Hot mess ๐Ÿ™‚ issue ?

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.