Change Headeer Menu Text Size & Add Search

Hello @tpeskin,

We can change the top menu font size with the help of custom css. Please apply the below given css under Appearance -> Customize -> Additional css-

#header .header-links > ul > li a {
font-size: 18px !important;
}

I hope the above was helpful.

Kind regards,

Manoj

Manoj,

Thank you. This worked for changing the header links, but it also changes the size of the entire menu. I want to ONLY change the top selections that show in the header. When you hover, the sub menu’s drop down, I prefer to have the original font size of 12. Do you know how to do this??

Thank you!

Hello @tpeskin,

Please apply the below given css under Appearance -> Customize ->Additional Css-

#header .header-links > ul > li a {
font-size: 18px !important;
}
#header .header-links ul.sub-menu li a {
font-size: 12px !important;
}

I hope the above was helpful.

Kind regards,

Manoj

Thank you Manoj, you are super helpful. I have two other questions if you possibly could help. The first is still relating to my menu header links.

Is there CSS to make the width of the drop-downs automatically size to the text? For example, when you hover over Travel Destinations, there is so much extra space in the drop down. The reason I ask, is because I have many layers in my drop down. I am hoping to have the text fully show up on my screen, which it currently is not (13-inch laptop screen):

Travel Destinations > North America > United States > Hawaii > Kauai > list of articles run off the screen.

My second question is do you know CSS to change the background color of the built-in Search bar in the header? When I turn the search feature on, it ads a strip across the entire header, directly above the menu dropdowns, which is a black background. I would love to enable this search, but I need the background white to match the header.

Thanks so much again!!

Hello @tpeskin,

Regarding the dropdown automatically size, the theme is not specifiacally built for 13 inch laptop. It built for all standard sizes. We don’t think its a issue. The layout will come perfectly in larger screens (1920 px ..)

Regarding the search background , we are providing the custom css. In order to provide css its important that we can see the search enable on the site. However please apply the below given css under Appearance -> Customize ->Additional Css-

#pre-header-search .search {
 background: #fff !important;
}

Kind regards,

Manoj

Thank you Manoj, good to know it should look find on most screens.

As for the header search, the CSS you provided only changes the background color of the Search box, not the banner. I enabled it the website so you can see. Currently, the search box is white, based on the CSS you provided. Is there CSS to change the blank bar/banner/background color to white also?

Thank you!
Timon

Hello @tpeskin,

To make the black bar white. Please apply the below given css under Appearance -> Customize -> Additional Css-

#pre-header {
background: #fff !important;
}

I hope the above was helpful.

Kind regards,

Manoj

Is it possible to put the search bar on the very top of the page, above the header logo/image? If possible, it would be great to have the very top RIGHT side of the website above the header image.

Hello @tpeskin,

We did not support theme core file editing or customization.

Kind regards,

Manoj