Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • May 2, 2014 at 11:58 am #259323
    anakinroy

    hi

    i am using the enfold theme for my corporate website
    i faced a problem
    i want to increase the height where my logo is but without increasing the size of the logo

    i did a search in this forum
    and got this
    /*default header: main logo and main menu height. increase max value if you want to use a bigger logo*/
    #header_main .container, .main_menu ul:first-child > li a{ height:88px; line-height: 88px; }
    if i change the height 88px to another number like 128, sure enough the height increases which is what i want
    but i dont want the logo size to increase also
    is there a way to increase the height and the logo size remains the same
    any help will be much appreciated
    thank you

    my web is http://www.goldrise.com.sg

    May 2, 2014 at 1:16 pm #259371
    Yigit

    Hi anakinroy!

    You can add following code to Quick CSS in Enfold theme options under General Styling tab to adjust the size of your logo

    .logo img { max-height: 70%; }

    Regards,
    Yigit

    May 2, 2014 at 3:20 pm #259438
    anakinroy

    hi
    it works great
    but another questioner
    after extending the header, the logo is not sitting in the center
    how to shift the logo down so that its in the center of the extended header?

    May 3, 2014 at 4:51 pm #259730
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    .logo img { margin-top: 20px; }

    Best regards,
    Yigit

    May 5, 2014 at 4:35 am #260072
    anakinroy

    wow

    great, it works

    thank you so much

    May 5, 2014 at 6:26 am #260080
    anakinroy

    hi again

    now i am using a custom color for the menu bar from the css below
    #header_main_alternate, .bottom_nav_header.social_header .main_menu ul:first-child {
    background-color: rgba(0,0,0,0.3);
    }

    i wanted a transparent black menu bar, but after going through many diff rbga, it renders gray when i set the opacity lower
    i assume there is no color code for transparent black
    so my question is
    can i upload a transparent black image to the web and use css to use the image file?
    and the menu words will sit nicely on the image?

    second question

    i tried shifting the menu bar down so that it overlaps the slider
    #header_main_alternate {
    margin-top: 35px;
    margin-left: 0px;

    }
    and then using the sticky header option
    it works
    but it leaves behind a white line and area previously occupied by the menu
    any ways to remove it cause the area becomes redundant

    my end result is a black transparent menu bar overlapping the slider at the top of the slider

    thank you so much again in advance

    May 5, 2014 at 6:34 am #260081
    anakinroy

    something to add on
    i can only add sticky header option so that the css
    #header_main_alternate {
    margin-top: 35px;
    margin-left: 0px;

    }
    moves the menu bar down to overlap the slider
    but by sticky header, it affects all the other pages which i dont want

    so can i sticky the homepage only to have the menu bar sitting on it
    or is there another method where the menu bar only shifts down on the homepage and remain the same in the other pages?

    thank you again

    please take a look at my web
    http://www.goldrise.com.sg and http://www.goldrise.com.sg/aboutus

    • This reply was modified 11 years, 2 months ago by anakinroy.
    May 5, 2014 at 7:40 am #260090
    Dude

    Hi!

    1) If you want to get rid of the extra space insert this code into the child theme:

    
#header_main_alternate {
margin-top: 0;
}

    2) You should be a able to apply a semi transparent background to the header menu dev without any images – try this code:

    
.header_color .header_bg, .header_color .main_menu ul ul, .header_color .main_menu .menu ul li a, .header_color .pointer_arrow_wrap .pointer_arrow, .header_color .avia_mega_div {
background-color: rgba(0,0,0,0.5);
}

    Maybe you need to remove some elements from the selector but it should give you a good starting point.

    Cheers!
    Peter

    May 5, 2014 at 10:44 am #260165
    anakinroy

    sorry
    .header_color .header_bg,
    .header_color .main_menu ul ul, .header_color .main_menu .menu ul li a, .header_color .pointer_arrow_wrap .pointer_arrow, .header_color .avia_mega_div {
    background-color: rgba(0,0,0,0.5);
    }

    this changes the top part where the logo is, to black also
    can i just change the menu bar only?

    i tried removed
    .header_color .header_bg,
    or
    .header_color .main_menu .menu ul li a,
    or
    .header_color .main_menu ul ul,
    or
    .header_color .pointer_arrow_wrap .pointer_arrow,
    or
    .header_color .avia_mega_div

    still renders the whole header black or transparent white
    but i only want the menubar transparent black

    • This reply was modified 11 years, 2 months ago by anakinroy.
    May 5, 2014 at 11:22 am #260183
    anakinroy

    and one more question

    instead of moving the header down
    whats the css to move the layerslider up?

    May 5, 2014 at 11:54 am #260195
    anakinroy

    but dude
    i dont know why
    but ur opacity is what i want
    but if only it can be for the menu bar only like what i am using now

    big thank you if u can help me out
    almost there with the header problem

    May 6, 2014 at 5:40 am #260564
    anakinroy

    anyone can help me with the
    .header_color .header_bg,
    .header_color .main_menu ul ul, .header_color .main_menu .menu ul li a, .header_color .pointer_arrow_wrap .pointer_arrow, .header_color .avia_mega_div {
    background-color: rgba(0,0,0,0.5);
    }

    i just want the same opacity but only the menu bar black transparent

    May 6, 2014 at 4:56 pm #260810
    Yigit

    Hi!

    0,0,0 is RGB value of color black and 0.5 is opacity level. You can adjust opacity level between 0-1.

    Cheers!
    Yigit

    May 7, 2014 at 5:04 am #261094
    anakinroy

    thanx
    but one last question

    .header_color .header_bg,
    .header_color .main_menu ul ul, .header_color .main_menu .menu ul li a, .header_color .pointer_arrow_wrap .pointer_arrow, .header_color .avia_mega_div {
    background-color: rgba(0,0,0,0.5);
    }

    and

    #header_main_alternate, .bottom_nav_header.social_header .main_menu ul:first-child { background-color: rgba(0,0,0,0.5); }
    renders to different results
    the top, provided by dude is more of a transparent black
    the bottom renders a transparent gray
    thats what i am puzzled about

    • This reply was modified 11 years, 2 months ago by anakinroy.
    May 7, 2014 at 5:10 am #261098
    Josue

    That’s expected, the rbga values are different one is 0.3 and the other one 0.5.

    Regards,
    Josue

    May 7, 2014 at 5:15 am #261106
    anakinroy

    my bad
    i mean they are both 0.5
    one is closer to transparent black
    another is transparent gray

    May 7, 2014 at 5:18 am #261111
    anakinroy

    the enfold layerslider has right n left arrows
    the transparent black appears when u cursor over the arrows
    thats the effect i want

    May 7, 2014 at 5:23 am #261115
    anakinroy

    my current menu bar is too much transparent gray
    when slider changes to black pic
    the gray is very obvious
    but if use dude’s codes
    the effect changes
    but dude’s codes changes the top header and menu bar
    i only want the menu bar to be transparent black
    like the right and left hover arrows in the slider

    i am using dudes codes now
    i want the top header(the part where the logo is) i want that part to be #f0f0f0

    • This reply was modified 11 years, 2 months ago by anakinroy.
    May 7, 2014 at 6:07 am #261141
    anakinroy

    nevermind everyone

    problem resolved by inspecting with chrome

    thank you all

  • Author
    Posts
Viewing 19 posts - 1 through 19 (of 19 total)
  • The topic ‘header height increase’ is closed to new replies.