Mobile Menu tabs bigger & centered - Support | Kriesi.at

Viewing 30 posts - 1 through 30 (of 31 total)

1 2 →

Author

Posts
March 20, 2017 at 2:15 am #763409

ccyran
Participant

Hey guys,

can you provide quick CSS to making the mobile menu tabs bigger and centered?

website: ccyran.com/work

Best,
Chris

March 20, 2017 at 2:50 am #763421
Mike
Moderator
Hey ccyran,
Try this code in the General Styling > Quick CSS field:
```
#mobile-advanced {
display:flex!important;
 align-items: center;
  justify-content: center;	
  flex-direction:column;
 letter-spacing: -.03em;
 font-size: 3.2rem;
 line-height: 1.1em;
}
```
Best regards,
Mike
March 20, 2017 at 3:40 am #763440

ccyran
Participant

Hi Mike,

Almost there! I also want to…

1. remove the black lines between the tabs
2. the tiny triangle arrow on the right.
3. Change the animation to be a fade in. Instead of this swipe in from the top right.

Thanks!
Chris

March 22, 2017 at 4:41 pm #764862

Andy
Inactive Moderator

Hi,

not sure what you mean, as I can’t find the elements you’re talking about on the link you’ve provided. Please always make sure that you’ve provided us a precise link where we can inspect the elements you’re talking about. Also add screenshots, so we can be sure we know about which elements you’re talking about (use imgur.com, dropbox).

Again, you’re asking for quite a lot of customizations. Be aware that we’re here to provide very basic support only and if it gets into too much customization work, then we recommend to work with a freelance developer instead.

Best regards,
Andy

March 22, 2017 at 4:51 pm #764873

ccyran
Participant

Hey Andy,

I was talking about the menu you see on my website when on mobile. Apologies, I didn’t think this needed a screenshot.

Here’s a screenshot: https://ibb.co/hkpLJv

Im sorry im asking for alot, I just wish the enfold theme consider the mobile header a bit more. There’s no customization options for mobile, but there’s a bunch for desktop.

Best,
Chris

March 24, 2017 at 2:39 pm #766204
Andy
Inactive Moderator
Hi,

thanks for the screenshot. Use this code:
1.)
```
.bild-menu>div>ul>li:before 
{
background-color: white;
}
```
2.)
```
.bild-menu a:before {
content: '\e800';
font-family: 'entypo-fontello';
}
```
3.) Seems you’ve already achieved it.

Best regards,
Andy
March 24, 2017 at 5:29 pm #766296

ccyran
Participant

Those two worked! But I actually don’t have the solve for number 3. The window still slides in from the top right. Can I get css for that?

Thanks again Andy! Really really appreciate the support.

March 28, 2017 at 7:01 am #767897
Ismael
Moderator
Hi,

Please try this code in the Quick CSS field.
```
.avia_transform3d #mobile-advanced {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: visibility 0s .36s, opacity .36s ease;
    -moz-transition: visibility 0s .36s, opacity .36s ease;
    -o-transition: visibility 0s .36s, opacity .36s ease;
    transition: visibility 0s .36s, opacity .36s ease;
}

.avia_transform3d .show_mobile_menu #mobile-advanced {
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity .36s ease;
    -moz-transition: opacity .36s ease;
    -o-transition: opacity .36s ease;
    transition: opacity .36s ease;
}
```
Best regards,
Ismael
March 28, 2017 at 7:16 am #767906

ccyran
Participant

Hey Ismael,

Tried that and nothing changed. Maybe the css isn’t correct somewhere?

Thank you.
Chris

March 28, 2017 at 7:30 am #767916

Ismael
Moderator

Hey!

Please make sure that you’re not looking on a cached version of the site. It is working properly on our installation.

Cheers!
Ismael

March 28, 2017 at 7:38 am #767921

ccyran
Participant

Hey!

Can you show me a screenshot of how you see it? I’m did a hard reset and cleared my cache and it still looks the same.

Thanks!
Chris

March 28, 2017 at 7:47 am #767927

Ismael
Moderator

Hey!

I just added the code in the Quick CSS field or the css > custom.css file. Please post the login details here so that we can check it.

Cheers!
Ismael

March 28, 2017 at 7:50 am #767929

ccyran
Participant

Coo! Details below!

March 29, 2017 at 11:56 pm #769175

Ismael
Moderator

Hi!

The css code is actually working. It’s fading in and out instead of sliding.

Regards,
Ismael

March 31, 2017 at 6:30 am #769728

ccyran
Participant

Hey!

That does work but I also wanted the tabs to be bigger, centered, and without that arrow on the left.

Thanks!
Chris

March 31, 2017 at 7:13 am #769740
Ismael
Moderator
Hi!

Use the following css codes.
```
#mobile-advanced a, #mobile-advanced .mega_menu_title {
    font-family: 'Cormorant Garamond', 'Adobe Garamond', 'Garamond', 'EB Garamond', Times, serif;
    font-weight: 600;
    letter-spacing: -.03em;
    font-size: 3.2rem;
    line-height: 1.1em;
    text-align: center;
    border: none;
}

#mobile-advanced a:before {
    display: none; 
}
```
Cheers!
Ismael
March 31, 2017 at 7:18 am #769741
ccyran
Participant
Perfect!

Im sorry one last thing i promise!

I want to move the tabs a bit further down from the menu. so its not close to that border line. If I could remove that border line too that would be awesome.

**I also don’t want that overlay to appear once you click on the tab, the white knockout highlight. Is this something I edit in the general styling?**

Thanks again!
- This reply was modified 7 years, 8 months ago by ccyran.
March 31, 2017 at 7:30 am #769747
Ismael
Moderator
Hi!

This will do:
```
#mobile-advanced {
    padding-top: 120px;
}

#mobile-advanced>li:first-child>a:first-child {
    border: none;
}

#mobile-advanced li > a:hover {
    background-color: transparent;
    color: orange;
}

#mobile-advanced li > a:hover, .html_header_mobile_behavior #mobile-advanced span:hover, .html_header_mobile_behavior #mobile-advanced span:hover a {
    background-color: transparent;
}
```
Regards,
Ismael
March 31, 2017 at 7:38 am #769748

ccyran
Participant

This worked!

Dude you’re the freaking best. I honestly wish I could do more than say thank you.

March 31, 2017 at 7:59 am #769762

Ismael
Moderator

Hi!

No worries. Glad we could help. :)

Regards,
Ismael

April 13, 2017 at 7:08 am #777053

ccyran
Participant

Hey Ismael,

Im sorry to bug you,

I looked at my mobile menu tabs and it looks like it’s changed :(

It’s now transparent and the menu tabs are really small. Could you fix this?

Thank you,
Chris

April 13, 2017 at 11:43 am #777187
Ismael
Moderator
Hi!

There’s a few invalid css declarations in the Quick CSS field which is now fixed. And it’s mostly because of this css modification.
```
.avia-menu-text {
    font-family: Open Sans;
    font-weight: 550;
    -webkit-font-smoothing: antialiased;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 11px;
}
```
We removed that temporarily. Please remove browser cache or hard refresh before checking the page.

Cheers!
Ismael
April 13, 2017 at 11:49 pm #777581
ccyran
Participant
Hey Ismael,

When I remove that CSS, it is fixed.
But I lose how the styling is on desktop. I wanted to keep the uppercase, smaller more tracked out tabs.

Can you help me keep this styling the same? And on mobile making the point size bigger.

My only problem now is that the mobile tabs are really tiny. I also didn’t want the transparency behind the tabs.

Sorry for bugging you, I also posted my login info below if you want to take a look at all the Quick CSS styling I have.

Thank you,
Chris
- This reply was modified 7 years, 8 months ago by ccyran.
April 16, 2017 at 4:01 am #778355
Ismael
Moderator
Hi!

Place it inside a desktop css media query.
```
@media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */

}
```
Regards,
Ismael
April 17, 2017 at 6:44 pm #778855

ccyran
Participant

Hey Ismael,

I apologize, Im getting really confused. Which CSS? I have no much CSS implemented to make these tiny tweaks, I’m not sure what you’re telling me to do.

Sorry for the confusion and thanks again for helping me.
Chris

April 17, 2017 at 6:48 pm #778860
ccyran
Participant
Hey Ismael,

This is what I did!…

@media only screen and (min-width: 768px) {
.avia-menu-text {
font-family: Open Sans;
font-weight: 550;
-webkit-font-smoothing: antialiased;
text-transform: uppercase;
letter-spacing: .1em;
font-size: 11px;
}
}

• It looks like it works now, but the menu text isn’t uppercase,I want it smaller.
• Along with not making the background transparent. I want it black.

My final result is to get it looking like this… http://www.watsonnyc.com/
But with my font.

Thank you,
Chris
- This reply was modified 7 years, 8 months ago by ccyran.
April 18, 2017 at 5:10 am #779055
Ismael
Moderator
Hi!

Please look for the following css code.
```
#mobile-advanced>li:first-child>a:first-child {
    border: none;
}
```
Below, add this one.
```
#mobile-advanced > li > a {
	font-family: Open Sans;
	font-weight: 550;
	-webkit-font-smoothing: antialiased;
	text-transform: uppercase;
	letter-spacing: .1em;
}
```
Best regards,
Ismael
April 19, 2017 at 6:15 am #779779
ccyran
Participant
That worked!

My final two questions…

01. How do I increase the line height/ spacing between the two tabs?
02. I want the background when you click on the dropdown icon to be completely black. right now it’s transparent.

Thanks again!
- This reply was modified 7 years, 8 months ago by ccyran.
April 20, 2017 at 5:27 am #780287
Ismael
Moderator
Hi!

1.) In the Quick CSS field, look for this css declaration.
```
#mobile-advanced a, #mobile-advanced .mega_menu_title {
    font-family: &#039;
    font-weight: 400;
    letter-spacing: -.03em;
    font-size: 2.2rem;
    line-height: 1.1em;
    text-align: center;
    border: none;
    color: #ffffff;
}
```
Adjust the value of the line-height property.

2.) Again, in the Quick CSS field, look for the following css code.
```
.home ul#mobile-advanced {
    background: black;
}
```
Replace it with:
```
#mobile-advanced {
    background: black;
}
```
For new inquiries, please create a new thread. Thank you!

Best regards,
Ismael
April 20, 2017 at 9:43 pm #780797

ccyran
Participant

YOU ARE THE MAN! Thanks so much!

*Got your note about making new threads too*

Thanks Ismael!
Author

Posts

Viewing 30 posts - 1 through 30 (of 31 total)

1 2 →

You must be logged in to reply to this topic.