[Support request] CSS for Custom Menu

[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]

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%;
}

[David]

Hi there,

can you share a link to where i can see the Hot mess 🙂 issue ?

[Author]

Posts