Menu icon Foundation
Move toggle menu icon to the right

Hello

How can I move the toggle menu Icon in mobile mode from the left to the right side of the screen. I have a Logo and some menu points, which change into the three lined logo in mobile. Unfortunately, it places itself on the top left of the logo. This odesn't look good ( images ).

 

Does anybody have a suggestion

 

Thanks a lot

All the best

Jakob

toggle menu

Hello

How can I move the toggle menu Icon in mobile mode from the left to the right side of the screen. I have a Logo and some menu points, which change into the three lined logo in mobile. Unfortunately, it places itself on the top left of the logo. This odesn't look good ( images ).

 

Does anybody have a suggestion

 

Thanks a lot

All the best

Jakob

Jarryd Fillmore about 1 year ago

I think the best way to do this is to just mess with margin-left! on each view of course

Son of Spectrum about 1 year ago

I had the same question.

Solution via @Val Ery

<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
  <div class="title-bar-right">
    <button class="menu-icon" type="button" data-toggle></button>
    <div class="title-bar-title">Menu</div>
  </div>
</div>

 

 

Jakob Degler about 1 year ago

I did a float: right;

Works well

 

Thanks

Preston Cross 12 months ago

Wow I just figured this out. Very easy. Its just a matter of using the classes title-bar-left and title-bar-right. Logo on left, menu icon on the right. My markup is below.

<div class="title-bar" data-responsive-toggle="site-navigation">
	<div class="title-bar-left">
		<div class="title-bar-title">
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/agency_54_logo.png" class="mobile-logo" /></a>
		</div>
	</div>
	<div class="title-bar-right">
		<button class="menu-icon" type="button" data-toggle="mobile-menu"></button>
	</div>
</div>

Marcel Epp 4 months ago

Solution from Preston Cross works fine! Thank you!