Archived topic
CSS for Custom Menu
2 replies · Started by Jennifer on January 14, 2021
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
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%;
}
Hi there,
can you share a link to where i can see the Hot mess :) issue ?
