Thank you. That works great on the homepage. I took the code and added it to my Enfold Child.

Also, I want to put the same blog post that is on the home page (http://tanuri.wpengine.com) on most or all of the other static pages in the website. How can I do that so that font size, style, color, etc are the same on each time? I added the same blog post to another page (http://tanuri.wpengine.com/board-of-directors-minutes/) (hosted on WPengine) but the text styling did not carryover.

Thank you,

— John

Thank You Yigit,

Really Helpfull, I didn’t end up changing anything in the menu.php file as it makes a global change but it helped me figure out what I needed to do, so i’m supplying the CSS for anyone else that might have issues like this.

/* MOBILE MAIN MENU */
#advanced_menu_toggle {
width: 120px;
color: #7C6853;
transition: all 0.3s ease-out 0s
}

#advanced_menu_toggle:after {
content: ‘Menu’;
font-size: 18px;
position: relative;
top: -4px;
left: 10px;
color: #7C6853;
transition: all 0.3s ease-out 0s
}

#advanced_menu_toggle:hover:after{
color: #fff;
transition: all 0.3s ease-out 0s
}
/* MOBILE MAIN MENU END */

/*MOBILE FULL WIDTH SUB MENU */
.mobile_menu_toggle{
background-color: #81D8D0 !important;
color: #fff !important;
}

.mobile_menu_toggle:after{
content: ‘Menu’;
font-size: 18px;
position: relative;
top: -4px;
left: 5px;
color: #fff;
}

.mobile_menu_toggle:hover{
background-color: #fff!important;
color: #7C6853 !important;
}

.mobile_menu_toggle:hover:after{
color: #7C6853 !important;
}
/* MOBILE FULL WIDTH SUB MENU END */

If you need to change the content for the full width sub menu for inidividual pages add a version of the code below to the ‘Code Block’ of that page

<style>
.mobile_menu_toggle:after { content: “Custom Menu Text Here” !important; }
.</style>

Andy,

That code was for my old code if I revert back to the code you provided it overlaps the main image with the tabs. I have provided all the code listed below that is currently in my quick css

font-size: 20px;
font-weight: bold;
text-align: center;
}

.content, .sidebar {
padding-top: 10px;
padding-bottom: 10px;}
body { font-size: 16px; }

.phone-info span { font-size: 16px; }

.main_menu .menu ul { width: 235px; }

#top div .avia-gallery img { border-style: none; padding: 0; }

@media only screen 
 and (min-width: 584px) 
 and (max-width: 1200px) {
.container #advanced_menu_toggle, #advanced_menu_hide {
display: block;
}
.main_menu .avia-menu, #header_main_alternate, .fallback_menu {
display: none;
}}

@media only screen
  and (min-width: 584px)
  and (max-width: 1200px) {
ul.noLightbox.social_bookmarks.icon_count_4 {
left: -60px;
display: block;
}}

That’s interesting. Never knew that property existed. Thanks.

So, in my case, does the “em” seem to work because the “font-size” property set by the theme itself was created with responsiveness in mind? It’s just making whatever responsive value 1.5x bigger?

I tried the edit that you mentioned however the social media icons still disappear around 770 pixles and the top content bar with the phone number adjusts to the center. This switch with the top bar text moving to the center and the icons disappearing should take place around 660pixles. Any help cleaning up this code would be greatly appreciated. Thanks

font-size: 20px;
font-weight: bold;
text-align: center;
}

.content, .sidebar {
padding-top: 10px;
padding-bottom: 10px;}
body { font-size: 16px; }

.phone-info span { font-size: 16px; }

.main_menu .menu ul { width: 235px; }

#top div .avia-gallery img { border-style: none; padding: 0; }

@media only screen 
 and (min-width: 584px) 
 and (max-width: 1200px) {
.container #advanced_menu_toggle, #advanced_menu_hide {
display: block;
}
.main_menu .avia-menu, #header_main_alternate, .fallback_menu {
display: none;
}}

@media only screen
  and (min-width: 584px)
  and (max-width: 1200px) {
ul.noLightbox.social_bookmarks.icon_count_4 {
left: -60px;
display: block;
}}

Sure,

See link in Private Content
You can find some Header Menu Text like “Event auf Segelyacht”
How can I change this font type and size – with other word, I would like to customize the Header Text.
Is this possible?

BR Thomas

Yes, the admin is hereunder.

The following CSS:

This code appears in colour section 4 :
<h2 style=”text-align: center;”>ALTALEO vous fait bénéficier de son expérience dans les problématiques comptables transfrontalières.</h2>

it uses the following CSS coming from the advanced CSS customisation panel of your template:

media=”all”
#top #wrap_all .header_color h2, #top #wrap_all .main_color h2, #top #wrap_all .alternate_color h2, #top #wrap_all .footer_color h2, #top #wrap_all .socket_color h2 {
font-size: 28px;
line-height: 1.7em;
font-family: ‘proxima-nova’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
text-transform: none;
}

The following block is in colour section 5 at the bottom of the page, it is generated via template builder, as a copy of the section 4, but it uses another CSS:

<h2 style=”text-align: center;”>ALTALEO vous fait bénéficier de son expérience dans les problématiques comptables transfrontalières.</h2>

uses the following CSS:

media=”all”
.template-page .entry-content-wrapper h1, .template-page .entry-content-wrapper h2 {
text-transform: uppercase;
letter-spacing: 1px;
}

The result is that the letters are capitalised and the line-heigth changes.

• This reply was modified 10 years, 6 months ago by eurobc.

Is it possible to have them decrease the font size on ipad so the whole text is visible ? This without making the text smaller on desktop ?

Thanx

By default, font-size is 15px and I want to change it to 17px. I know that is possible if I change it in the ‘/enfold/config-woocommerce/woocommerce-mod.css‘

Inside, I look for:

#top .price, #top .price span, #top del, #top ins{
display: inline;
text-decoration: none;
font-size: 15px;
line-height: 24px;
font-weight: 600;
}

and then change:
font-size: 15px;

to
font-size: 17px;

I want do this in ‘style.css‘ inside enfold-child.

I have added:
#top .price, #top .price span, #top del, #top ins{ font-size: 17px !important; }

to Quick CSS in Enfold-Child theme (like you said), and it works.

But then I have tried to add the same code to ‘style.css’ in Enfold-Child theme, and it doesn’t work.

Is there any option that it works?

The WebSite is http://www.topmenaje.com

• This reply was modified 10 years, 6 months ago by LEPT.

Hi Yigit!

Thank you for your help.

I have tried your code in my enfold-child (‘style.css’ or Quick CSS in Enfold-Child theme options), and something strange happened.

Only changes the dash between the prices. I have used ‘font-size: 7px’ to emphasize the difference.

Before After