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
- Code: Select all
@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.
yours unleash
