Header size & add menu

[soos]

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.

[soos]

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

[Abe]

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.

[Fronkol]

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?

[soos]

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

[Abe]

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.

[Abe]

@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.

[Fronkol]

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?

[Abe]

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.

[Fronkol]

http://www.HitPanPresents.com

[Abe]

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.

[Fronkol]

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.

[Abe]

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.

[Fronkol]

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.

[Abe]

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.

[soos]

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/

[Abe]

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.

[soos]

thank you! works perfect

[Author]

Posts