Main Menu Button "float: right" not working

Thank you Victoria! I am going to try this out later the day.

Maybe One more thing: can I reproduce a menu button-style like this? Menu-Button

It must be something like:

.button:after {
background-image: url(//image.url);
left: 0;
}

Or should I open a new topic for this?

Thanks in advance

• This reply was modified 4 years, 11 months ago by sabsab.

Hi Victoria,
thanks for helping me out!

The button is now created and i tested with the code your’re providing here: “Menu Centered” but cant find the right modification without destroying the current process with overlapping and so on. :)

I think now I just need to modify this snippet right?

/************************************

 Add a widget area on the right side
 Logo left, Menu center, Widget right

*************************************

CSS Settings:

» Initiate Flexbox
» Topbar
» Header
» Logo
» Menu
» Widget
» Social icons
» Search
» Cart icon

***********************************/ 

/*--------------------------------

» Initiate Flexbox

--------------------------------*/

/* Header */
.responsive #top #header,
/* Top bar */
.responsive #top #header #header_meta,
/* Search icon */
.responsive #top #header #menu-item-search a,
/* Cart icon */
.responsive #top #header a.cart_dropdown_link,
/* Social icon */
.responsive #top #header #header_main nav .social_bookmarks,
/* Logo */
.responsive #top #header #header_main .inner-container .logo,
/* Main menu, cart and social icons */
.responsive #top #header #header_main .inner-container .main_menu,
/* Widgets */
.responsive #top #header #header_main .inner-container .widget,
/* Header inner container */
#top #header #header_main .container.av-logo-container .inner-container {    
    display: flex;
    position: relative;
}

/*--------------------------------

» Topbar

--------------------------------*/

/* Top bar */

.responsive #top #header #header_meta {
    flex-basis: 100%;    
}

/*--------------------------------

» Header

--------------------------------*/

/* Height */

#top #header #header_main .container.av-logo-container {
    height: inherit;   /* Auto height: Header takes the height of the contents */
}

/* Header inner container */

#top #header #header_main .container.av-logo-container .inner-container {
  height: inherit; 
  position: relative !important;
  flex-wrap: nowrap;
  justify-content: space-between;
}

/* Wrappers 
--------------------------------*/

/* Header content and Topbar */

.responsive #top #header {
    flex-wrap: wrap;
}

/* Header contents: Logo, Menu, Social Icons and Widgets. */

.responsive #top #header #header_main {
    flex-basis: 100%;    
}

/* Transparent header 
--------------------------------*/

.responsive.html_header_transparency #top #wrap_all #header {
    position: absolute;
}

/* Main content: 
-----------------------*/

.responsive #top #main { 
    padding-top: 0px; /* Gap between the content and header */
} 

/* Fixed header 
--------------------------------*/

/* Fixed header */

.html_header_sticky.html_header_transparency #top #wrap_all #header,
.html_header_sticky #top #wrap_all #header { 
    position: fixed; 
} 

/* Fixed header and page content gap. 
   Padding value should be same as the fixed header height. */

.html_header_sticky:not(.html_header_transparency) #top #wrap_all #main { 
    /*padding-top: 145px !important; */
} 

@media only screen and (max-width: 767px) {
.html_header_sticky #top #wrap_all #main {
    /*padding-top: 145px !important; */
}}

/*--------------------------------

» Logo

--------------------------------*/

/* Logo */

.responsive #top #header #header_main .inner-container .logo {
    order: 0;
    flex-basis: auto;
    /*width: auto;*/

    /* Define scalable min width of the logo on small screens */
    min-width: 100px;
    /* Define scalable max width of the logo on big screens */
    /* Logo width: (auto | 100% | px );  Set auto to display the uploaded image size */
    max-width: 180px;
    
    z-index: 9;
}

/* Logo image size */

.responsive #top #header .logo,
.responsive #top #header .logo a,
.responsive #top #header .logo img {
    width: auto;
        
    /* Height specification is not required. It is proportional to the max width of the logo */
    height: auto;    
    align-items: center;
    align-self: center;
    justify-content: center;
}

/* Vertically center transparency logo */

.responsive #top #header .logo span img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/*--------------------------------

» Menu

--------------------------------*/

/* Menu outer container: Menu with siblings cart and social icons */

.responsive #top #header #header_main .inner-container .main_menu {
    order: 0;
    flex-basis: auto;   /* Use calc to minus the width of the logo */
    align-items: center;
    align-self: center;
}

/* Navigation */

#header .av-main-nav {
    display: flex;
    flex-wrap: nowrap;
}

/*  Activate burger menu  */

@media only screen and (max-width: 1000px) {
    #top #header .av-main-nav>li.menu-item {
        display: none!important;
    }
    #top #header .av-burger-menu-main {
        cursor: pointer;
        display: block!important;
    }
}

@media only screen and (max-width: 767px) {

/* Mobile menu position fix */
.responsive #top .av-logo-container .avia-menu {
    display: flex!important;
    align-items: center;
}}

/* Mega menu position fix */
#header li .avia_mega_div,
#header li:hover .avia_mega_div {
    right: 0 !important; /* submenu position */
    left: auto!important; /* submenu position */
    max-width: 50vw;
}

/*--------------------------------

» Widget

--------------------------------*/

/* Widgets */

.responsive #top #header #header_main .inner-container .widget {
    order: 0;
    flex-basis: auto;
    padding: unset;
    clear: none!important;

    align-self: center;
    align-items: center;
    z-index: 1;

}

.responsive #top #header #header_main .inner-container .widget>div {
    width:100%;
    line-height: 14px;
    padding:0 10px;
}

/*--------------------------------

» Social icons

--------------------------------*/

/* Flex support and position fix */
.responsive #top #header #header_main nav .social_bookmarks {
    display: flex;
     top: auto;
     margin-top: 0;
     align-items: center;
}
/* Inherit height for flex alignment */
#top .av-logo-container .social_bookmarks li {
    height: inherit;
}

/*--------------------------------

» Search 

--------------------------------*/

/* Your styles here */

/*--------------------------------

» Cart 

--------------------------------*/

/* Cart position fix */

#top #header #header_main #menu-item-shop a.cart_dropdown_link {
    height: auto;
}

@media only screen and (max-width: 767px) {
    .responsive #top #menu-item-shop.cart_dropdown {
        display: flex;
        align-items: center;
    }
    .cart_dropdown .dropdown_widget .avia-arrow {
        display: none;
    }
}

Thank you very much!

Hi Basilis,

can u give me a hint on styling the button as mentioned above? May you can help with modification?

I am trying to achieve this kind of button. And how do I fix the position on mobile screen? I am trying to get the logo on the left, hamburger on the right and widget-button in the middle on mobile. This is kinda tricky

Here is the mobile menu at its current state

thank you!
greetings,
sabsab

• This reply was modified 4 years, 11 months ago by sabsab.

Hi Victoria, thank you for helping me out.

I always post it as a link (in blue in my last comment :) saying “Here is the mobile menu at its current state“). I am uploading to “Imgur” and it is working isn’t it?

Here is the mobile menu again: https://imgur.com/a/j7I1x9P May you can help me arange it as mentioned.

I am trying to add this small arrow to the button on the left side: https://imgur.com/a/27xsUhw . LIke this one here: https://imgur.com/afIXUT4

I thought its like:

.button:after {
background-image: url(//image.url);
left: 0;
}

Thanks in advance,
Sabsab

• This reply was modified 4 years, 11 months ago by sabsab.

Thank you Ismael! That’s a good and easy solution.

Can u help me align the mobile menu as mentioned? https://imgur.com/a/j7I1x9P May you help me arrange it? I am trying to get the logo on the left, hamburger on the right and widget-button in the middle on mobile. This is kinda tricky

Thank you very much!

Hi Ismael,

thank you for the update. Unfortunately, nothing changes on my end (I cleared cache and opened in incognito on mobile to check the menu bar). I am trying to get the logo on the left-hand side, widget-button in the center of the mobile-menu-bar and hamburger-menu on the right-hand side of the menu bar. I am not finding the correct CSS. May you can help? Yes, I was hiding the social-icons on mobile to achieve the mobile-menu the way I mentioned. :)

The current state of the mobile menu: https://imgur.com/d4p9rNY

Thanks in advance!
Sam

• This reply was modified 4 years, 11 months ago by sabsab.

Hi everyone and thank you for the support! I wish a great and happy new year :)

Ismael thank you for following up but unfortunately, I don’t really know what you have done. may you check the menu on desktop and mobile again. The menu-order is great but the menu is now overlapping on desktop and not very nice on mobile too. :(

State befor changes made: https://imgur.com/a/j7I1x9P
Current state desktop-menu: https://imgur.com/a/Y42Y424 (its overlapping the last menu-item)
Current state mobile-menu: https://imgur.com/a/Y42Y424 (Logo and widget-button are overlapping)

May we can find a solution to that for desktop and mobile?