Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • June 13, 2015 at 6:39 pm #458810
    wienerpresswerk

    hi there,

    my customer wants a nearly 100% logo size to fill nearly the available space in header.
    it´s fine for now as long as i don’t switch the window size.
    i want the logo adopt to resize depending on window size automatically.
    for now i added to dust. css.

    #top .logo {
    width: 100%;
    height: 100%px;
    margin-top:-2px;
    margin-left:2%;
    margin-bottom:2%;
    }

    thanks for a quick hint.

    June 15, 2015 at 8:35 am #459156
    Rikard

    Hey wienerpresswerk!

    I had a look at your site but I can’t see anything obviously wrong with it except that the logo looks pretty small on small window sizes. Could you try to explain your problem a bit further and maybe provide us with a screenshot of it as well?

    Regards,
    Rikard

    June 30, 2015 at 7:43 pm #466658
    wienerpresswerk

    hi there,

    Sorry if i´m confusing ;-)

    what I’m trying to reach you can see below in Priv. Section. a nearly 100% Logo centered.
    Menu items with different hoover status and positioning under the related color area in logo.
    Do you have any idea how to manage that?
    I would greatly appreciate your help!

    For now i have added to custom css:

    /*Change Hamburger colors:*/
#advanced_menu_toggle, #advanced_menu_hide {
    background-color: #FFF;
    color: #545454;
    border-color: #393838;
}

/*Change dimensions of logo era:*/
#top .logo {
	width: 100%;
	height: 200;
        margin:-top:5px;
       }

/*Change  colors on hoover:*/
.link5:hover {
	background-color: #3E5D65;
}
.link4:hover {
	background-color: #6D8B31;
}
.link3:hover {
	background-color: #E69D2D;
}
.link2:hover {
	background-color: #D25A17;
}

/*give menu items constant width:*/
#menu-item-16594{
width: 190px !important;
}
#menu-item-16505{
width: 190px !important;
}
#menu-item-16506{
width: 190px !important;
}
#menu-item-16503{
width: 190px !important;
}
#menu-item-16507{
width: 190px !important;
}
/*add some space below menu:*/
.content{
padding-top:25px;
padding-bottom:25px;
}
#header_meta {
min-height: 40px;
}
/*styling  custom menu on pages:*/
.sub_menu {
font-size: 13px;
line-height: 30px;
position: relative;
top:20px;
}

    best!

    July 2, 2015 at 9:52 am #467374
    Ismael

    Hi!

    You should create another logo specifically for mobile device because the text in the original logo is a bit too small. Use this in the Quick CSS field to remove the default logo then add the mobile logo as background:

    @media only screen and (max-width: 767px) {
.responsive #top .logo {
  background-image: url('http://efl.wienerpresswerk.at/wp-content/uploads/2015/06/mobile_logo.gif');
  background-size: 100%;
  background-repeat: no-repeat;
}

.logo img { display: none; }
}

    Regards,
    Ismael

    July 8, 2015 at 8:20 am #470064
    wienerpresswerk

    Hi Ismael,

    Thx for your response. That “logo replace” wont work for me. Any other idea?

    The main Prob for me ist the placement of any single menu item. That finally every menuitem is placed under a color bar from logo abobe.
    i.e. “LIZENZ” is placed under the green bar from logo above 786px.

    Thanks and best regards !

    July 8, 2015 at 2:10 pm #470271
    Yigit

    Hi!

    You can refer to this post and change logo on mobile – http://kriesi.at/documentation/enfold/change-logo-on-mobile/
    Please note that you will not be able to see the changes when you resize browser window. Please check on an actual device after making changes.

    Best regards,
    Yigit

    July 10, 2015 at 2:27 pm #471452
    wienerpresswerk

    Hi Yigit,

    That def. a feature request for Enfold – simply select a diff. mobile logo in Framework options.
    As long as other FW can handle that easily i.e. VC or others im surprised that esp. my genius from next corner down´t offer that
    without PHP editing.

    So anyway. maybe i´ve going on to rebuild the site later in web flow und other tools.

    For now i like to complete the project and need a quick idea for pavement of menu items as described above:

    what I’m trying to reach you can see below in Priv. Section. i have a nearly 100% width Logo – centered.
    Menu items with different hoover status and positioning under the related color area in logo.The main Prob for me ist the placement of any single menu item. That finally every menuitem is placed under a color bar from logo abobe.
    i.e. “LIZENZ” is placed under the green bar from logo above 786px.

    Thx for advice because i´m confused with all the diff. classes for now.

    July 13, 2015 at 10:20 am #472214
    Andy

    Hi!

    not sure if I understand what you mean and I think screenshots would help a lot (use imgur or dropbox). You link in private content does not work for me, because I see “Sorry, you do not have permission to access this page.”.

    Regards,
    Andy

    July 13, 2015 at 7:45 pm #472636
    wienerpresswerk

    Hi Andy,

    Should look like that

    View post on imgur.com

    Its about to set the right position for every Menu item below the refering color from logo above. as i understand i have to create a couple of @media classes to keep that all in place IF i found a solution to set it properly for desktops.

    THX!

    July 15, 2015 at 11:03 am #473602
    Andy

    Hey!

    use this code to control position of your menu items:

    li#menu-item-16594 {
right: 20px;
}
li#menu-item-16707 {
right: 25px;
}
li#menu-item-16503 {
right: 30px;
}
li#menu-item-16841 {
right: 23px;
}

    Best regards,
    Andy

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.