Logo on top, center, with icons on left and burger on left for mobile - Support

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
March 21, 2020 at 1:22 am #1194977

djarrow01
Participant

Hi,
I’m trying to get a layout similar to https://www.miragelandscape.com/ seen in mobile.
On Mobile I’m trying to get the logo to be stacked on top with the the icons to the left and burger menu to the right. Is there any way to do this? So far I have them all on the same line.

March 21, 2020 at 1:51 pm #1195060
Nikko
Inactive Moderator
Hey djarrow01,

Can you try adding this CSS code in Quick CSS, located in Enfold > General Styling:
```
@media only screen and (max-width:767px) {
  .responsive #top .logo {
    width: 100%;
    padding-top: 20px;
  }

  .responsive .logo img {
    margin: 0 auto;
  }

  .responsive #top #wrap_all .main_menu {
    position: static;
    display: flex;
  }

  .responsive #top #wrap_all .main_menu .avia-menu {
    width: 50%;
    order: 2;
  }

  .responsive #top #wrap_all .main_menu .avia-menu .av-burger-menu-main {
    float: right;
  }

  .responsive #top #wrap_all .main_menu .social_bookmarks {
    width: 50%;
    order: 1;
  }

  .responsive #top #wrap_all .main_menu .social_bookmarks {
    width: 50%;
    order: 1;
    text-align: left;
  }

  .responsive #top #wrap_all .inner-container > .social_bookmarks {
    display: none !important;
  }
}
```
Best regards,
Nikko
March 27, 2020 at 11:23 pm #1198482

djarrow01
Participant

Hello, thank you very much this looks great. The only issue now is that on mobile it is showing up in two places now, to the right of the logo and also on the line below like I want it to be. Here is my full quick code css:

The first line of code is to make it appear on mobile. The other code is what you gave me.

@media only screen and (max-width: 767px){
.responsive #top #header .social_bookmarks {
display: block!important;
}
}

@media only screen and (max-width:767px) {
.responsive #top .logo {
width: 100%;
padding-top: 20px;
}

.responsive .logo img {
margin: 0 auto;
}

.responsive #top #wrap_all .main_menu {
position: static;
display: flex;
}

.responsive #top #wrap_all .main_menu .avia-menu {
width: 50%;
order: 2;
}

.responsive #top #wrap_all .main_menu .avia-menu .av-burger-menu-main {
float: right;
}

.responsive #top #wrap_all .main_menu .social_bookmarks {
width: 50%;
order: 1;
}

.responsive #top #wrap_all .main_menu .social_bookmarks {
width: 50%;
order: 1;
text-align: left;
}

.responsive #top #wrap_all .inner-container > .social_bookmarks {
display: none !important;
}
}

March 30, 2020 at 7:23 am #1199007
Nikko
Inactive Moderator
Hi djarrow01,

Please after this code:
```
@media only screen and (max-width:767px) {
```
add this code:
```
.responsive #top #wrap_all #header .social_bookmarks, 
.responsive #top #wrap_all #header .social_bookmarks li, 
.responsive #top #wrap_all #header .social_bookmarks li a {
    height: 30px;
}

.responsive #top #wrap_all .main_menu .avia-menu .av-burger-menu-main, 
.responsive #top #wrap_all .main_menu .avia-menu .av-burger-menu-main a {
    height: 80px !important;
    line-height: 80px !important;
}
```
Also a tip, you don’t need multiple
```
@media only screen and (max-width:767px) {
```
so for example instead of having this code (I used partial of the code above):
```
@media only screen and (max-width: 767px){
  .responsive #top #header .social_bookmarks {
    display: block!important;
  }
}

@media only screen and (max-width:767px) {
  .responsive #top .logo {
    width: 100%;
    padding-top: 20px;
  }
}
```
you can write it like this:
```
@media only screen and (max-width: 767px){
  .responsive #top #header .social_bookmarks {
    display: block!important;
  }

  .responsive #top .logo {
    width: 100%;
    padding-top: 20px;
  }
}
```
Hope this helps. :)

Best regards,
Nikko
April 2, 2020 at 10:59 pm #1200320

djarrow01
Participant

Thank you Nikko, I altered the code as instructed but I am not seeing any change. I’m still seeing the icons in two places. Here is my final code:

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

.responsive #top #header .social_bookmarks {
display: block!important;
}

.responsive #top #wrap_all #header .social_bookmarks,
.responsive #top #wrap_all #header .social_bookmarks li,
.responsive #top #wrap_all #header .social_bookmarks li a {
height: 30px;
}

.responsive #top #wrap_all .main_menu .avia-menu .av-burger-menu-main,
.responsive #top #wrap_all .main_menu .avia-menu .av-burger-menu-main a {
height: 80px !important;
line-height: 80px !important;
}

.responsive #top .logo {
width: 100%;
padding-top: 20px;
}

.responsive .logo img {
margin: 0 auto;
}

.responsive #top #wrap_all .main_menu {
position: static;
display: flex;
}

.responsive #top #wrap_all .main_menu .avia-menu {
width: 50%;
order: 2;
}

.responsive #top #wrap_all .main_menu .avia-menu .av-burger-menu-main {
float: right;
}

.responsive #top #wrap_all .main_menu .social_bookmarks {
width: 50%;
order: 1;
}

.responsive #top #wrap_all .main_menu .social_bookmarks {
width: 50%;
order: 1;
text-align: left;
}

.responsive #top #wrap_all .inner-container > .social_bookmarks {
display: none !important;
}
}

April 3, 2020 at 2:04 pm #1200521
Nikko
Inactive Moderator
Hi djarrow01,

Can you try this code:
```
.responsive #top #header .inner-container > .social_bookmarks {
    display: none !important;
}
```
inside the media query:
```
@media only screen and (max-width:767px) {
```
Best regards,
Nikko
April 3, 2020 at 11:38 pm #1200686

djarrow01
Participant

Hi Nikko, I added the code but still no change.

April 4, 2020 at 1:14 am #1200698

djarrow01
Participant

Hi Nikko, if it would just be simpler to do custom icons there instead of the social icon system that is fine too. Whatever is easier.

April 4, 2020 at 3:43 pm #1200806

Nikko
Inactive Moderator

Hi djarrow01,

I could not see the code I gave when I inspected the site.
I have also tried the login credentials you gave but it doesn’t seem to work, please check.

Best regards,
Nikko
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.