Still very happy with the resolved font, I have come upon another problem/question.
I have to copy another website (points-of-you.com), and I have been trying with the Beaver Builder theme and without it (with only pagebuilder) to make the same structure and looks of the header of that site. Only I can’t succeeded in doing that.
With the BB-theme: I can’t put a search-box into the top navigation, I have to put the logo lower in the header, and there still are the grey lines between the topnav and main nav.
And with only pagebuilder I also have to use 2 rows so the logo doesnot reach the top, and when I put a search box in a row I cannot make the height smaller so that it is very high for the design.
That is my actual question: how can I make the search box less high! I have put all the margins and paddings at 0 already…
I explained it all if maybe you have a better idea for the whole thing… My site is points-of-you-benelux.com.
That layout is going to be hard to do with the BB theme/plugin OOB. You’re gonna have to use custom CSS to achieve it, or hardcode some of the contents. Why not use a navigation bottom header layout, and hardcode the search box and shop button on the right content area of the header?
I’d just chime in here. I think what Ben is trying to say is to use the BB theme header layout settings. Since you are using BB theme, go to your WordPress Dashboard, navigate to Appearance > Customize > Header > Header Layout > Layout > Select “Nav Bottom”. Then insert your custom search box and shop button on the right content area of the header. See attached screenshots for your reference. Let us know how if it’s what you’re looking for.
Thank you for the information, but this is not what I mean. I actually need to have the logo on the left side, and on the right side of the logo two rows with controls: the first with a search bar and a shop button (and in the future maybe a cart icon/functionality, and underneath that the main navigation…
But it is possible to insert a search-box with functionality in a text widget?
And also my other question; if I put a search box - widget on a page and put all the margins and padding of the row and element on 0, the height of the search box is still too high for me. How can I make it smaller?
Also in my 3-column row, the one empty column is much higher then the menu and button I put in the other 2 columns?
Do you think you can share temp admin access to your site so we could play around with it? You can post the details here using the private reply option below.
Yes it is! I have been looking around how you did it, and only saw the minus margin at the menu, but still don’t understand how you get the rows behaving like nested rows, it is amazing!! Thank you very much!!
x Pascall
Only… now the submenu of the menu is laying underneath the next row, so that it is almost not visible… how can I get the slider behind the submenu?
Sorry for the many questions!
x Pascall
And I have been searching the internet for tutorials or CSS snippets to change the look of the (sub-)menu to the look of the other website, but so far I have only got an idea how it works.
I think I should be able to define a CSS-class in the menu-item for the styling of the submenu? Or do I have to redefine the menu and the submenu class in the customizer at CSS-code?
For the submenu background, this can be modified under the Style tab of the Menu module. Check the screenshot below for reference. http://imgur.com/IzVLUXQ
I had already put a 100% white opaque background, but the problem is that it disappears behind the next row probably because of the construction KC thought of… I don’t know how to bring the submenu forward or the next row (a slider) backward.
For the styling of the submenu; I now see indeed the CSS subclasses per menu-item in the menu, understand that I have to define a class for the menu, so that I can change the appearance (and rollover etcetera for the menu-items. And then make a different class for the submenu-items, put that class in each of the submenu-items. The characteristics for both classes I have to define somewhere else, probably in the customize-code-css? Which code of the codes underneath do I use for that?
x Pascall
===
The class will be added to the LI (list item) element, the same element that has the menu item ID attached. You can then style your item like this, where .menu is replaced by the class used for your menu:
/* Target the menu item LI /
.menu li.myClass{
/ Margin might go here /
}
/ Target the menu item Anchor (link) /
.menu li.myClass > a{
/ Colors, font sizes, would normally go here */
}
/* Target the menu item LI in UberMenu */ #megaMenu ul.megaMenu li.myClass{
}
/* Target the menu item Anchor (link) in UberMenu / #megaMenu ul.megaMenu li.myClass > a{
/ Colors, font sizes, would go here */
}
Remember that you may need to increase your selector specificity or use the !important flag in order to ensure that your new styles are applied.
The problem there is you probably don’t have a Submenu Background Color selected so it’s showing a transparent background. Try placing a white background on that setting and see if it fixes the issue.
The first two should work. Just change myClass to whatever class you’ve added for your menu items. The last 2 are for UberMenu which I believe you aren’t using. To learn more about CSS, feel free to check the link below. http://www.w3schools.com/html/html_css.asp
There is a setting on the Menu module for alignment, I believe yours is set to right. Try reducing the width of the column so it fits the menu and change that alignment to left or default.
The colors, font size, and capitalization are all under the Style tab of the Menu module. Try playing around with the module’s settings more, and with the page builder in general.
The underline on hover can be achieved with the CSS snippet below. You can place this directly under Appearance > Customize > Code > CSS Code.
.fl-menu li a:hover {
text-decoration: underline;
}
Feel free to use the above code as reference for when you’re looking to learn CSS.
