btw. i’m a participant as you are here on board; but everyone here of the mods do the best they can – but your request from Friday – just before weekend ? have a little understanding that they have a private life too!
Thanks

try this: http://www.yoursite.com/your_portfolio_page?custom_ajax=12?iframe=true
as link

by the way: where is that code from?

• This reply was modified 8 years, 10 months ago by Guenni007.

the code above gives you only the chance of using it by activating the font on Enfold/… fonts

if you do not choose the font on Enfold Options the font is still not activated!

One easy way is to activate the font (if you don’t want it by default for all h2) to go to enfold/advanced styling/ and create a rule f.e. for h6 using this font. From than on you can use the font on quick css.

This works – ok.
But if you have a transparent header you have to find a solution (for scroll offset i think) because the color-section f.e. with background image is looking through header.

maybe you give the code of mine above a chance. You only have to activate in Enfold – Header – Extra Elements

1) the search icon in Navigation
2) Position of Header social icons (you don’t have to have social icons here)

function av_move_search(){
?>
 <script>
jQuery(window).load(function(){
jQuery(".av-main-nav > li#menu-item-search").detach().appendTo('#header .social_bookmarks')
});
 </script>
<?php
}
add_action('wp_footer', 'av_move_search');

What is not so nice on that solution is
there is a little time shift till the search icon list point is in the social-icon list but it has the right position from the beginning.
Only a little css is needed to have the search results in that dropdown look good:

.ajax_search_entry {
    text-align: left !important;
    min-width: 250px !important;
    padding-left: 15px !important;
}

• This reply was modified 8 years, 10 months ago by Guenni007.

well – i tested it and if sub-menu is empty it does not work

So it is not so easy without having other content there.
If you got social profiles you can do the Yigit trick by shifting the search field to that field:
But there has to be that little mark on: Append search icon to main menu
and there has to be at least one social Profile.

this in child-theme functions.php

function av_move_search(){
?>
 <script>
jQuery(window).load(function(){
jQuery(".av-main-nav > li#menu-item-search").detach().appendTo('#header .social_bookmarks')
});
 </script>
<?php
}
add_action('wp_footer', 'av_move_search');

And don’t tell Christian that i can copy his circles :)

sorry – me as a participant too – i’m now out.

maybe the mods have an Answer for you – but se my comment above
If you google to “is it good practice to use iframe”

One more on that: the left shift of the icons is a bit tricky – this is in dependency to caption length.
If the length of the caption under the icon is to big the left position has to be corrected.

I tried to place the av-icon-char in an absolute way (only the circles with the icon) but than positioning of the caption is not possible.

or you give this a chance:

https://kriesi.at/support/topic/overlapping-shrinking-logo/

Please take the new code because i put it on math basis – declaration see here : link

by the way i noticed that safari does not support content: url()
so i would now prefer the background solution !

na immerhin habe ich auf Grund deiner Anfrage das nette Plugin gefunden, welches ich nun auch für größere Mengentexte verwende. Insbesondere wenn ich Blocksatz nutze.

Bingo ! See here on top : Link

4 or 6 Icon Circles : most is the same code-block has one less or one more circle.
And only Positioning of the icons is the work to do – all the rest is similar to 5 Icon Circle !

In the Code-Block you only have to complete Link, link-target and fill in you own Caption

• This reply was modified 8 years, 10 months ago by Guenni007.

The 5 Circle Case:

Some Positioning:

/* the circle itself border-radius has to be more than 50% of height and width */
.circle {
    border: 2px solid #059 !important;
    border-radius: 250px;
    display: block;
    height: 500px;
    overflow: visible;
    padding: 0 !important;
    width: 500px;
    position: relative;
    margin: 60px
}

/* if you like to have a background-image in the circle, with less opacity */
.circle::before {
    background-color: transparent;
    background-image: url("http://webers-testseite.de/ikom/wp-content/uploads/sh_284363741.jpg");
    border-radius: 250px;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
}

/* if you don't like to change the code itself you can set the icon size here */
.circle .av_font_icon .av-icon-char  {
    font-size: 50px !important;
    line-height: 50px !important;
    width: 50px !important;
}

/* this is the class from the code not the caption set by icon element and determines the position where the description is shown */
.circlecaption {
    position: relative;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* you see in that code that these are the single text elements of each Icon */
.circlecaption span {
    display: none;
    width: 250px; 
font-size: 16px;
text-align: center
}

/* this is the logo or image in the center - hover states must follow than */
.circlecaption img {
    display: block;
    width: 250px;
}

/* very nice gimmick - the tilde (swung dash) is a special selector - read yourself  */
/* it is called: General Sibling Combinator */
.circle .av_font_icon.circle1-5:hover ~ div.circlecaption span.circle1-5,
.circle .av_font_icon.circle2-5:hover ~ div.circlecaption span.circle2-5,
.circle .av_font_icon.circle3-5:hover ~ div.circlecaption span.circle3-5,
.circle .av_font_icon.circle4-5:hover ~ div.circlecaption span.circle4-5,
.circle .av_font_icon.circle5-5:hover ~ div.circlecaption span.circle5-5 {
display: block;
background: rgba(255,255,255,0.8);
padding: 5px;
border-radius: 5px
}

/* hover effects for the hovered links  */

.circle .av_font_icon.circle1-5:hover a {
background: #BF00FF;
color: #fff !important
}
.circle .av_font_icon.circle2-5:hover a {
background: #0080FF;
color: #fff !important
}
.circle .av_font_icon.circle3-5:hover a {
background: #00FF00;
color: #fff !important
}
.circle .av_font_icon.circle4-5:hover a {
background: #FFFF00;
color: #000 !important
}
.circle .av_font_icon.circle5-5:hover a  {
background: #FF0000;
color: #fff !important
}

/*  hovering the icons - let the logo in the circle disappear */
.circle .av_font_icon:hover ~ div.circlecaption .circlelogo {
display: none !important;
}

/* positioning of each icon in the uniform pentagon - so most positions are calculated and nearly not  influenced*/ 
/*  - by circle dimensions  - 50px is here  icon-font-size  -  but this is a lot trial and error  */

.circle .av_font_icon a , 
.circle .av_font_icon span {
    background-color: #fff;
}

.av_font_icon.circle1-5 {
    position: absolute;
    top: calc(0px - 55px);
    left: calc(0px + 195px);
}

.av_font_icon.circle2-5 {
    position: absolute;
    top: calc(0px + 118px);
    left: calc(0px + 433px);
}

.av_font_icon.circle3-5 {
    position: absolute;
    top: calc(0px + 397px);
    left: calc(0px + 342px)
}

.av_font_icon.circle4-5 {
    position: absolute;
    top: calc(0px + 397px);
    left: calc(0px + 48px);
}

.av_font_icon.circle5-5 {
    position: absolute;
    top: calc(0px + 118px);
    left: calc(0px - 55px);
}

here some code for responsive case:

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

.circle .av_font_icon .av-icon-char  {
    font-size: 40px !important;
    line-height: 40px !important;
    width: 40px !important;
}

.circle .av_font_icon .av-icon-char {
    padding: 20px !important;
}

.circle {
    height: 350px;
    margin: 40px;
    overflow: visible;
    width: 350px;
    border-radius: 190px;
}

.av_font_icon.circle1-5 {
    position: absolute;
    top: calc(0px - 35px);
    left: calc(0px + 135px);
}

.av_font_icon.circle2-5 {
    position: absolute;
    top: calc(0px + 81px);
    left: calc(0px + 301px);
}

.av_font_icon.circle3-5 {
    position: absolute;
    top: calc(0px + 277px);
    left: calc(0px + 238px)
}

.av_font_icon.circle4-5 {
    position: absolute;
    top: calc(0px + 277px);
    left: calc(0px + 32px);
}

.av_font_icon.circle5-5 {
    position: absolute;
    top: calc(0px + 81px);
    left: calc(0px - 32px);
}
}

• This reply was modified 8 years, 10 months ago by Guenni007.

i do not see your site – so i can not help you –
i mentioned above that i have made this for my solution for ipad landscape. This depends on the logos and the logo width.

so play a bit with those values of logo width.
And a good advice is to make the images the same size on your graphic program.

• This reply was modified 8 years, 10 months ago by Guenni007.