Jump to content
Sign in to follow this  
dil_bert

Width on mega menu dropdown - how to achieve that?

Recommended Posts

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. 
 

Share this post


Link to post
Share on other sites

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>
	

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.