Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 3, 2013 at 6:22 pm #170020
    Eli

    Hi guys!
    I got a few questions. I didn’t know if to split it or not. Let me know fro next time what do you prefer.

    I’m working on my website, and I want to change a few things:

    1. Header size. I want it to be 70px and shrink to 45px.
    I found here on the forum a code but it wasn’t good with padding.
    And what size should I make my logo?
    Right now i’m like how it’s when it shrink. but since it’s shorter, it’s not centered.

    2. How do I control the design of the width lines (below header, between sections)?
    I may want to change the colors and remove shadow.
    I’m using fixed width. But I want the header line to be stretched, like facebook design.

    3. Is it possible to change logo when it shrinks?

    4. Logo hover – is there a way to change color of the logo on hover?

    Thank you so much,
    I really appreciate your efforts.

    Eli

    PS I hope you’ll improve the search system so we can save your time by finding answers.

    • This topic was modified 11 years, 1 month ago by Eli.
    October 6, 2013 at 12:29 am #170907
    Josue

    Hi Eli!

    1. Add this CSS to the Quick CSS (Enfold > Styling):

    .fixed_header #main {
padding-top: 70px;
}
#header_main .container, .main_menu ul:first-child > li a {
height: 70px !important;
line-height: 70px !important;
}
.header-scrolled #header_main .container, .header-scrolled .main_menu ul:first-child > li a {
height: 45px !important;
line-height: 45px !important;
}

    2. This will remove the box-shadow, and will make the border red (change red for the desired color):

    .avia-section{
border-color: red;
box-shadow: none;
}

    3. It is possible, but that would require a deeper customization, and that’s out of the scope of this support forum, if you really need it, try hiring a freelancer for the job.

    4. Your logo is an image, you can’t ‘change’ the color of an image.

    Cheers!
    Josue

    October 10, 2013 at 5:25 pm #173711
    Eli

    Thank you very much!

    Now still having issues, here is the website again:

    1. The logo ins’t response to mouse hover – as a link to hompage.

    2. Also, I’ve tried this code, no success:

    #top .bg-logo a:hover {
background: url('http://eliweissberg.com/wordpress/wp-content/uploads/2013/10/Logo2.png');
}

    And anyway I prefer to use hover this method:

    #logo2 {width:300px;margin:0 auto;text-align:center;}
#logo2 a {
outline: none;/* get rid of dotted borders in FireFox */
 text-indent: -5000px ;/* this moves the text outside of the screen area */
		display:block;
		width:295px;
        height:115px;
		background: transparent url("images/articles/logo_v2.png") 0 0 no-repeat;
		text-decoration: none;
		}
	#logo2 a:hover {
		background-position: 0 -115px;
		}

    3. In the advanced Layer Slider, I set the width to 910px, but there is inside shadow on top.

    4. How do I align the menu exactly to the left?

    Thanks again,
    Eli

    October 11, 2013 at 2:28 am #173905
    Josue

    Hey!

    1.

    In this file, replace this:

    div .logo { float: right; right: 0; }
.main_menu { left: 0; }

    By this:

    div .logo { right: 0; left: auto; }
.main_menu { left: 0; right: auto; }

    Cheers!
    Josue

    October 11, 2013 at 2:34 am #173912
    Josue

    Hello!

    2. That code isn’t working because this file doesn’t exist.

    3. I don’t see that shadow, can you post a screenshot of your view?

    4. Could you please elaborate? a screenshot would be helpful too.

    Regards,
    Josue

    October 11, 2013 at 12:41 pm #174121
    Eli

    Josue,
    Thank you very much!

    1. Works like a charm. Thanks.

    2. The code of "images/articles/logo_v2.png" was just an example.
    I’ve tried to make a rollover logo, but even the simple way of

    #top .bg-logo a:hover {
background: url('http://eliweissberg.com/wordpress/wp-content/uploads/2013/10/Logo21.png);
}

    Does not work.
    And I just say I prefer to do it with css background-position.

    So what am I doing wrong? I’ve copied this code from another thread.

    3-4. I’m attaching screenshot. The blue text is a description of problems.

    Eli

    Thanks.

    • This reply was modified 11 years, 1 month ago by Eli.
    October 11, 2013 at 8:04 pm #174363
    Josue

    Hi!

    For the logo hover effect, use this code:

    .logo{
background: url('http://eliweissberg.com/wordpress/wp-content/uploads/2013/04/E2Logo.png');
height: 70px;
width: 116px;
}
.logo:hover{
background: url('http://eliweissberg.com/wordpress/wp-content/uploads/2013/10/Logo2.png');
}
.logo img{
display: none;
}

    Regards,
    Josue

    October 11, 2013 at 8:08 pm #174365
    Josue

    Hello!

    Regarding the menu and shadow issue, try with this:

    .main_menu ul:first-child > li > a{
padding: 0 13px !important;
}
.main_menu ul:first-child > li:first-child > a{
padding-left: 0 !important;
}
#main #layer_slider_1{
box-shadow: none;
}

    Result:

    Regards,
    Josue

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Changing Header size, and some customization’ is closed to new replies.