dil_bert Posted December 28, 2019 Share Posted December 28, 2019 hello dear experts, good day dear buddies on PHPFreaks - good day - happy seasons-greetings to all of you - and a merry xmas. btw: it would be great if we have a special wordpress-forum here. This would be great the topic of today - Width on mega menu dropdown - how to achieve that... i am currently working on the customizing of the menubar of max-mega-menu. what is aimed: i want to take a whole row in the theme twentyseventeen: preliminiaries: - I wanted the menubar to be between the logo and the center of the theme. ?my approach: I add this CSS: header .container { display: flex; justify-content: space-between; align-items: center; } @media screen and (max-width: 600px) { .navbar-header { width:100%} } and changed the original sequence in the html code from: <div class="navbar-header"> if(th_is_woocommerce_activated()) // Shopping cart <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation"> to <div class="navbar-header"> <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation"> if(th_is_wp-job-manager_activated()) // Wp-Job-Manager - the plugin for jobs I have tried out this out - the above mentioned code - but i am not very happy with it. i hoped that the above mentioned code solved the problem. But the Mega menu is extremly small on both desktop and mobile view now. I would like the dropmenu is getting the max width. But I cannot figure out where to set the width? again - what is aimed: I am trying to make the mega menu occupied the full page width from the far left to the far right. I have almost tried everything that i can thing about. if the container that is dictating the width of the Mega Menu. i guess that i need to make it separate from its parent div. i am trying to add this theme's custom CSS or child theme CSS @media (min-width: 1200px) /* i might have to add the code for other screen sizes too depending on the mentioned theme */ .sf-menu .megamenu .megamenu_wrap { position: fixed; z-index: 999; width: 100%; margin-top: 30px; } @media (min-width: 992px) /* i might have to add the code for other screen sizes too depending on the theme */ .sf-menu .megamenu .megamenu_wrap { left: 0; } /* i think that i have to use !important where necessary if the changes do not reflect on the site. Refrain from using it unless absolutely necessary. */ i think that i should test the code above on a test site using Inspect in Chrome - the developer-toolset. i want to edit child theme or custom CSS box provided in the theme - since it is not clever to do the changes in the core theme. again - happy seasons-greetings to all of you - and a merry xmas. Quote Link to comment Share on other sites More sharing options...
NotSunfighter Posted December 28, 2019 Share Posted December 28, 2019 Never used woocommerce nor WP. But is this some thing like what you wanted: <style> div{display: inline-block;} .navbar-header { display: flex; justify-content: space-between; align-items: center; width:100%; background-color: lightgreen ; } @media screen and (max-width: 600px) { .navbar-header { width:100%;background-color: lightcoral;} } </style> </head> <body> <div class="navbar-header"> <div class="space">Space</div> <div class="container">Header</div> <div class="space">Space</div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
dil_bert Posted December 28, 2019 Author Share Posted December 28, 2019 hello dear NotSunfighter, many thanks for the quick answer. I am very glad to hear from you. Thanks for helping out here. I will try out this - it looks very convincing. again - many thanks!!! Have a great day. greetings dil_bert Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.