This topic has 17 replies, 3 voices, and was last updated 10 years by soos.

  • Author
  • #15271
     soos
    Participant

    Hello, i`m trying desperately to find the settings to make the header more thinner, more fb style.
    Also have no idea how to add some buttons to the header, would love to have an icon which takes me to my profile, as well as notifications and messages.
    Can anyone help me out pls?

    Attachments:
    You must be logged in to view attached files.
    #15273
     soos
    Participant

    also love the expanding search on http://seventhqueen.com/themes/kleo/members/ any idea how i could ad that permanently in the header ?

    #15498
     Abe
    Keymaster

    Hi,
    Give us a link to your site to see the exact problem. Also menu items are added from Wp admin – Appearance – Menus and assign a menu to Primary or Top locations

    See this topic to see how other users have added some notifications in the header: https://archived.seventhqueen.com/forums/topic/adding-notification-bubble-to-menu

    You can edit the header file template if you want to customize it. Here is the file responsible for the menus header part: wp-content\themes\kleo\page-parts\general-header-section.php

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    ---
    @ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

    #15604
     Fronkol
    Participant

    I’m also very curious how to make the header smaller. I checked out the “general-header-section”, but I couldn’t find the code that let’s you change the height and/or padding of the Main-header. I tried using a small logo, but that didn’t change anything 😛 Any idea which code I need to change and to what to make smaller?

    #15651
     soos
    Participant

    Hello Abe,
    Thank you for your fast response, love the template by the way!
    The link to my site is: http://boddict.com sorry if it still looks like i would make fun of it, but like i said i am new to WordPress, BuddyPress, coding… and this template ambitiones me to learn it.

    Pedro gave some explications here: https://archived.seventhqueen.com/forums/topic/logo-position as it seems he had the same problem, but i still don’t get it.

    Any ways you can explain me also how to add the expanding search to the header? 😀
    “also love the expanding search on http://seventhqueen.com/themes/kleo/members/ any idea how i could ad that permanently in the header ?”

    Thank you again and sorry for my silly questions

    #15803
     Abe
    Keymaster

    Hi there,


    @Fronkol
    there is a css rule to set the line height of the menu. Add this CSS rule to your kleo-child/style.css or in Theme options – Quick css:

    COPY CODE
    
    .kleo-main-header .navbar, .kleo-main-header .navbar-collapse ul {
        line-height: normal;
    }
    
    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    ---
    @ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

    #15804
     Abe
    Keymaster

    @soos see the above solution on setting the header size. You can set the line-height attribute to some other values like 40px, 88px being the default one from the theme
    The expanding search can’t be easily added to the header. You can copy that HTML code for the form and add it in the header.
    This is the html form code:

    COPY CODE
    
    <div id="buddypress"><div id="members-dir-search" class="dir-search" role="search">
    		<form style="min-width: 60%;" action="" method="get" id="search-members-form">
    		<label><input type="text" name="s" id="members_search" placeholder="Search Members..."></label>
    		<input type="submit" id="members_search_submit" name="members_search_submit" value="Search">
    	</form>	</div></div>
    

    the file to edit related to the header part: wp-content\themes\kleo\page-parts\general-header-section.php

    This should imply more that copying the code there and therefore you should hire a programmer to help you if you don’t have the required skills.

    Cheers

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    ---
    @ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

    #15859
     Fronkol
    Participant

    Hey Abe,

    Thanks for the quick reaction.
    It does the job perfectly. Only problem left is that the bar collapses (with the logo becoming even smaller).

    When disabeling the “resize logo” doesn’t help this problem (also makes the header big again).
    Any way to fix this last bump in the road?

    #15860
     Abe
    Keymaster

    Share a link to your site to see the problem please

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    ---
    @ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

    #15861
     Fronkol
    Participant
    #15864
     Abe
    Keymaster

    I don’t see the problem sorry. The logo seems as tall as the menu. Make the logo smaller

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    ---
    @ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

    #15875
     Fronkol
    Participant

    Making the logo smaller doesn’t seem to change it. It always makes the logo a certain % smaller when it collapses :/
    I tried several height values. 40 makes it small but viewable, but when I change it to 35px, the collapsed bar stays the same height (which is normal) but the logo becomes even smaller.

    Edit: The problem is the logo becoming really small. I wasn’t really clear about that in the previous post, sorry.

    #15886
     Abe
    Keymaster

    Well disable the resizing of the logo on scroll from the theme options

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    ---
    @ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

    #15892
     Fronkol
    Participant

    My mistake, Abe. I confused myself and messed up. I disabled the “resize logo” and made the logo smaller. Seems to be working perfectly now. Thanks for the help and patiens.

    #15896
     Abe
    Keymaster

    Great. Glad you sorted it out 😉

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    ---
    @ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

    #16037
     soos
    Participant

    Thank you Abe 🙂 worked just perfect! One more question is there any way to position the logo vertically speaking in the middle? right now as you see it is scratching the top http://boddict.com/

    #16046
     Abe
    Keymaster

    Add a padding to the logo image using CSS:

    COPY CODE
    
    .logo img {padding-top: 3px;}
    
    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    ---
    @ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

    #16050
     soos
    Participant

    thank you! works perfect

Viewing 18 posts - 1 through 18 (of 18 total)

The topic ‘Header size & add menu’ is closed to new replies.

Log in with your credentials

Forgot your details?