setting menu display

This way, I will be able to set the menu in the container.

Currently, the menu is set as a percentage of the page and this is unreliable

Hi Victoria,
I will try and come back to you.
Regards,
Iceman

Hello everybody,

I tried but It doesn’t work. I would like my menu , logo and headband stay in the bottom of my slider.
How can I do that ?

this is my code

@media only screen and (min-width: 768px) {
.page-id-2 div#header_main {margin-top: 40px}
.page-id-2 div#header_main_alternate {margin-top: 2px}
.page-id-2 .av_header_transparency #header_main, #top .av_header_transparency .avia-menu.av_menu_icon_beside {background-color: rgba(255, 255, 255, 0.25)!important}
}
@media only screen and (min-width: 1366px) {
.page-id-2 div#header_main {margin-top: 20px}
.page-id-2 div#header_main_alternate {margin-top: 2px}
.page-id-2 .av_header_transparency #header_main, #top .av_header_transparency .avia-menu.av_menu_icon_beside {background-color: rgba(255, 255, 255, 0.25)!important}
}

If I change 40px or 2px by 400px, nothing is happening. if I change margin-top by margin bottom, nothing happeneing too…

With px definition, elements are static but they stay in the same place whatever the value (define 20px or 160px
do not change anything)

Thanks in advance

Iceman

• This reply was modified 4 years, 10 months ago by ICEMAN.

Hi Victoria,

Could you give me an exemple with the code I put above ? I think I make this mistake in my entire css file…

Thanks for helping…

Regards

Nobody have any idea ?…

So I worked on my issue. A solution is to make mobile display works if the screen is smaller than width 680px and height 650px.
How can I define that ?
Best Regards
Iceman

• This reply was modified 4 years, 9 months ago by ICEMAN.

Hi Ismael, I hope you received my message.
Regards,
Iceman

Hi Ismael,

I tried your solution but it doesn’t work (see the result in private content ).

Moreover header transparency doesn’t work anymore.

So I replaced my css code by

 #header {
    margin-top: -100px;
}

And my child theme functions.php with your suggest is

<?php // Balise d'ouverture PHP

// ==================================================================
// THIS IS MY  FUNCTIONS.PHP
// ==================================================================

function mon_theme_mce_buttons_2($buttons) { 
array_unshift($buttons, 'styleselect');  
return $buttons;
}
add_filter('mce_buttons_2', 'mon_theme_mce_buttons_2');

function mon_theme_add_editor_styles() {   
add_editor_style( 'custom-editor-style.css' );
}
add_action( 'init', 'mon_theme_add_editor_styles' );

function my_mce_before_init_insert_formats( $init_array ) {  
$style_formats = array(      
// Chaque array défini 1 style    
array(        
'title' => 'Bouton 1',        
'block' => 'div',        
'classes' => 'btn1',      
'wrapper' => true,          
),array(        
'title' => 'Bouton 2',        
'inline' => 'span',        
'classes' => 'btn2',      
'wrapper' => false,    
),    
);    
// We add our style to existing ones

$init_array['style_formats'] = json_encode( $style_formats );    
return $init_array;  
}
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats');

// Ismael function 
function ava_move_full_screen_slider_above_header(){
?>
	<script type="text/javascript">
	(function($) {
		$(document).ready(function($){
			$("#main > .avia-fullscreen-slider").insertBefore("#header");
		});
	})(jQuery);
	</script>
<?php
}

add_action('wp_footer', 'ava_move_full_screen_slider_above_header');

// My Javascript

function wpb_hook_javascript() {
    ?>
        <script>
          // your javscript code goes
        </script>
    <?php
}
add_action('wp_head', 'wpb_hook_javascript');
?>

Best Regards,
Iceman

• This reply was modified 4 years, 9 months ago by ICEMAN.

Hi Ismael,

Is “temporary-login-without-password” a good plugin for that or maybe do you have another suggest ?

Regards,

Iceman

• This reply was modified 4 years, 9 months ago by ICEMAN.

Hello to all !

I retried Ismael solution and it’s work good now !

My functions.php code is:

// Ismael function 
function ava_move_full_screen_slider_above_header(){
?>
	<script type="text/javascript">
	(function($) {
		$(document).ready(function($){
			$("#main > .avia-fullscreen-slider").insertBefore("#header");
		});
	})(jQuery);
	</script>
<?php
}

add_action('wp_footer', 'ava_move_full_screen_slider_above_header');

and my CSS:

.page-id-2 #header {margin-top: -200px;}

in order to apply just for my home page.

How can I apply my previous transparency setting in order to have the result you can see in screen capture?
My previous CSS was:

@media only screen and (min-width: 768px) {
.page-id-2 div#header_main {margin-top: 520px;}
.page-id-2 div#header_main_alternate {margin-top: 2px;}
.page-id-2 .av_header_transparency #header_main, #top .av_header_transparency .avia-menu.av_menu_icon_beside {background-color: rgba(255, 255, 255, 0.25)!important}

Another important problem after these modifications: the mobile site doesn’t work anymore. The menu does not display correctly and I would like it to be in the top of the mobile site with the logo.

In fact, I would like the mobile display as it was before the modifications.
How should I do to make sure that the modifications do not apply to the mobile display ?

I leave the modifications until tonight because I can not leave the site like that too long so that you can see the malfunctions

Thanks for your help !

Best Regards,
Iceman

• This reply was modified 4 years, 9 months ago by ICEMAN.

In fact, I would like the mobile display as it was before the modifications.
How should I do to make sure that the modifications do not apply to the mobile display ?

Maybe something like that :

$(function() {

  if ($(window).width()>480){  }

 else{}

});

but I don’t know how to write this….

Best Regards,
Iceman

• This reply was modified 4 years, 9 months ago by ICEMAN.

Hello to all,
if someone can help me with my problem it would be nice because my mobile site does not work properly and I can not find a solution…
Best Regards,
Iceman