Forum Replies Created
-
AuthorPosts
-
nur diesen Code hier sehe ich in deinem CSS nicht (30% scheinen bei dir zu reichen):
.av-main-nav > li > a > .avia-menu-text, .av-main-nav li#menu-item-search [data-av_icon]::before { bottom: -30%; position: relative; }
Auf dem Ipad musst du dem Link oben folgen. Josue schrieb mir mal ein kleies Script, dass das Shrinken auf dem Ipad wieder möglich machte.
Musst du in der functions.php des Child-Themes dann als custom script einfügen.machen wir mal deutsch weiter – ist auch für mich leichter:
hast du den link gesehen: http://webers-testseite.de/ikom
wie gesagt ich hatte es jetzt mit -23% so eingestellt, dass die Pfeile des Logos auf die Navigation zeigen
wenn Du da wieder -35% einträgst ist es bei 200px header der Boden (ich stelle es mal auf -35% zurück im Beispiel-Link).Wenn du den Screen mal schmal machst, und das menu togglest, dann ist da auch das logo drin.
Damit mein Code oben greift, müsstest du allerdings erstmal das was du bisher versucht hast verwerfen. denn der Code oben reicht völlig aus, um auch das Shrinken mitzunehmen.
Der zeite Code ist nur dafür da, dass du links neben dem Logo nicht auch noch ein graues Feld hast.
#header #header_main .container { padding-right: 30px !important; max-width: 100% !important; width: 100% !important; } #advanced_menu_toggle { right: 30px; top: 70%; }
-
This reply was modified 9 years, 1 month ago by
Guenni007.
another hint if you set it to:
.av-main-nav > li > a > .avia-menu-text, .av-main-nav li#menu-item-search [data-av_icon]::before { bottom: -23%; position: relative; }
the navigation is on the level of the two arrows of the logo – looks nice too
and if you like to have the logo (the yellow background full left)
#header #header_main .container { padding-right: 30px !important; max-width: 100% !important; width: 100% !important; } #advanced_menu_toggle { right: 30px; top: 70%; }
what did you do to have the nav points on bottom ?
i only did the following: logo left menu right – shrinking header: and
.av-main-nav > li > a > .avia-menu-text, .av-main-nav li#menu-item-search [data-av_icon]::before { bottom: -35%; position: relative; }
thats enough – but you have to get rid of the other settings you did til now:
see here : Link
btw: the shrinking header did not work on default on ipads : Solution see here from Josue
you have to upload a js-file into your child-theme js folder and add a code snippet to child-theme functions.phpthe break-point of main-menu and mobile-menu is set by enfold options to 768px(only Mobile) or 990px (tablets too)
sometimes (if logo should be greater than usual or to many first level navigation entries) it might be better to break earlier; the code i used for that is:
@media only screen and (max-width: 1280px) { .container #advanced_menu_toggle, #advanced_menu_hide { display: block; } .main_menu .avia-menu, #header_main_alternate, .fallback_menu { display: none; } }
but here i see that wrap_all is generally set to display relative: http://kriesi.at/documentation/enfold/switching-to-mobile-menu-on-higher-resolutions/ and if i view it right it is outside the media querry instruction:
#wrap_all { position: relative !important; } @media only screen and (max-width: 1140px) { .container #advanced_menu_toggle, #advanced_menu_hide { display: block; } .main_menu .avia-menu, #header_main_alternate, .fallback_menu { display: none; } }
You have to play with that 1140px value another possibility is what Yigit says to reduce the padding left/right of the listpoints too
What kind of header did you choose there logo left menu right ? – and it has to shrink?
-
This reply was modified 9 years, 1 month ago by
Guenni007.
be aware that the wildcard * is there – otherwise only root (landing page) works.
on some pages the http Domains must be verified by Google
btw: nice Maintenance Mode on your Site – what plugin is it ?
and the better question is – how did you integrate the login in that way ?
perhaps you do it in a 1/4 3/4 columns greetings
schöne Grüße in die Schweiz#top .av-magazine-top-bar { border-bottom: medium none; float: left; width: 30%; } .av-magazine-sort { float: left; } #top .av-sort-by-term a { display: block; float: none; } #top .av-magazine-group { clear: none; display: block; float: left; width: 70%; } #top .all_sort_button.active_sort { display: block; float: none; } .text-sep { display: none; } .av-magazine-group.av-hidden-mag { clear: none; float: left !important; }
-
This reply was modified 9 years, 1 month ago by
Guenni007.
aha – from your site i see that this is not a masonry – it is a magazine
this will be nice to knowso i will have a look (thats why a link to your site is a nice thing)
yes strong has its own rule so we than had to set a rule similar to
.nolinkcolor a { color: inherit !important; }
September 20, 2016 at 3:12 pm in reply to: on Mega Menu show in front of list points the featured image #689309you rock !!!
the rest is css – Result see in private content so far on a test environment
-
This reply was modified 9 years, 1 month ago by
Guenni007.
and you have done the custom class on the table?
http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
did you realy read all i wrote on thread before?
see result here – allthough there is a link on contact it is red font color and to show that there is a link after the link an icon (you don’t need that – but how should visitors know that there is a link if no difference between the other table element is seen)
and – by the way for those fine lines of that logo – try to use svg instead.
http://webers-testseite.de/elegant/beispiel-seite/just drag&drop the svg to your desktop.
The only thing you have to think of is to setup for the svg a width and height otherwise it is set to 1px/1px
so you have a link on those Twitter … ?
by default an inline css should overwrite all styles – but try please first with important:
<p style="text-align:left; color:#a81010 !important"><span>CONTACT</span> <span>FACEBOOK</span> <span>TWITTER</span></p>
edit : does not work so
give the table a custom class f.e. nolinkcolor and than via quick css
.nolinkcolor a { color: inherit !important; }
and to make it visual that there is a link you can show an icon after those links:
.nolinkcolor a::after { content: " \00a0 \e822"; font-family: entypo-fontello; }
-
This reply was modified 9 years, 1 month ago by
Guenni007.
did you use copy paste from f.e. word ? because it seems that there is something with your quotes not working.
Try inserting this:<p style="text-align:left"><span style="color:#a81010">CONTACT</span> <span style="color:#a81010">FACEBOOK</span> <span style="color:#a81010">TWITTER</span></p>
by the way – this should work as well:
<p style="text-align:left; color:#a81010"><span>CONTACT</span> <span>FACEBOOK</span> <span>TWITTER</span></p>
to your question if you only want to make one word in a different color – the inline css method is best
if you have this very often – you can create a custom class for it like :.red { text-transformation: upperclass; color: #a81010; letter-spacing: 1px; }
than you only have to do:
<p class="red"><span>contact</span> <span>facebook</span> <span>twitter</span></p>
if you have to colorize all in that table or only every 2nd, 3rd etc field there are selectors which might help (nth-child selectors)
hey a new feature – i did not recognized it til now. And the fix works well – thanks Josue
if you have a lot of menu list first level entries or long terms – so that there is not enough place for the menu-list-points before it goes to mobile view – we had to find different settings
sorry the search has to be thought of:
.av-main-nav-wrap ul#avia-menu { display: inline-flex; left: 50%; position: relative; transform: translate(-50%); width: auto !important; } #menu-item-search { float: left !important; }
And why do you choose this in enfold options?
On Enfold Options / Header / Header-Layout there is the possibility to choose Logo center menu below.Or do you want to have the logo left – menu below but centered ?
Try this in quick css:
.av-main-nav-wrap ul { display: inline-flex; left: 50%; position: relative; transform: translate(-50%); width: auto !important; }
-
This reply was modified 9 years, 1 month ago by
Guenni007.
schau mal ob das reicht:
#advanced_menu_toggle { right: 10px; top: 60px; } #advanced_menu_hide { border: 2px solid #ecc544; right: 60px; top: 60px; }
warum da plötzlich Prozentangaben waren weiss ich nicht
wenn du es natürlich nur unterhalb einer gewissen Screenbreite willst musst du noch media querries hier setzen.
@media only screen and (max-width: 768px) { #advanced_menu_toggle { right: 10px; top: 60px; } #advanced_menu_hide { border: 2px solid #ecc544; right: 60px; top: 60px; } }
-
This reply was modified 9 years, 1 month ago by
Guenni007.
if you want it more specific – set up a custom class to the Masonry
and for small screen you have to adjust
@media only screen and (max-width: 479px) { #top div.container .av-masonry .av-masonry-sort { float: left; width: 98% !important; } }
try this here:
#top .av-current-sort-title { float: none; text-align: left; } #top .av-sort-yes-tax .av-sort-by-term, #top .av-sort-yes-tax .sort_by_cat { float: left; } .av-masonry-sort a { display: block; text-align: left; } .text-sep { display: none; }
maybe it is possible to get the masonry aside to that list. But i have no test installation with that constuction
try this here:
#top div.container .av-masonry .av-masonry-sort { float: left; clear: none; width: 18% !important; } .av-masonry-container.isotope { clear: none; float: left; position: relative !important; width: 80%; }
-
This reply was modified 9 years, 1 month ago by
Guenni007.
hm let me see.…
the option for that in the alb element says:
Section Bottom Border Styling
Chose a border styling for the bottom of your sectionso it is not the top of the next section – but the bottom of the edited section
and on that reason the color should be the background-color of the following sectionda gab es einen anderen Thread hier mit der Frage – wart mal schaue gerade wo der ist:
https://kriesi.at/support/topic/menu-style-the-burger-icon-menu/#post-685580
je nach Logo Seitenverhältnis muss man das natürlich noch optimieren. Und die Werte dann entsprechend ändern
this is a strange url because a folder with dot in front is invisible – isn’t it: /home/.sites/208/site579/web/…
is it for your provider normal on the absolute path?create a new text layer – edt transitions (from right to center or something else) – and here we go : edit Link & Attributes
if the button has to have hover states it will be nice to have here a class (f.e. slider-button)see that little test here: Link
Try this here:
.av-burger-overlay-inner, .av-burger-overlay-bg { background: #fff url("/wp-content/uploads/2015/07/laptop-white.jpg") no-repeat scroll 0 0; } .av-burger-overlay-active #top .av-hamburger-inner, .av-burger-overlay-active #top .av-hamburger-inner::before, .av-burger-overlay-active #top .av-hamburger-inner::after { background-color: #000 !important; } #av-burger-menu-ul li a { color: #000 !important; }
you see that a background-image is possible too !
Result see here: Link
by the way i got this code for me to work well:
add_filter( 'avia_post_nav_settings', 'enfold_customization_same_cat' ); function enfold_customization_same_cat( $s ) { $s['same_category'] = true; return $s; }
it is hard to say something on it without a link to that site. If there is one in private area than you have to wait on mods to answer you.
-
This reply was modified 9 years, 1 month ago by
-
AuthorPosts