Help for a newby!

Beaver Builder
1

Hey guys,
Ok, so here is my situation. this is my first time using beaver builder and I am very impressed with how awesome it is to use. I have a question. I have a webiste: https://kayrosprogram.com (password to bypass the block screen is kayross)

I have two menu’s. The top menu is what i am working on. I could not find a way to add a highlight around the top menu items( first consultation) and (patients) so I use the customize’ additional css to add the boxes and spacing. However, it appears when I did that, I broke the responsiveness of it. I have read that I can add a @media querie to fix this, but after looking at several tutorials, I am totally confused as to how I would add that to bring responsiveness back to that menu. Here is the code that I came up with to add the changes:

#menu-item-983 {

border: 1px solid #000;

border-radius: 1px;

border-color: #0A0000

}

#menu-item-984 {

border: 1px solid #000;

border-radius: 1px;

border-color: #6998D6

}

#menu-item-990 {

border: 1px solid #000;

border-radius: 1px;

border-color: #0A0000;

margin-left: 10%;

padding-left: 10%;

padding-right: 10%;

}

#menu-item-964 {

border: 1px solid #000;

border-radius: 1px;

border-color: #6998D6;

margin-left: 10%;

padding-left: 10%;

padding-right: 10%;

}

If anyone can tell me if I did this right and how I can make that top menu responsive again while still being able to move things around that would very much appreciated. Remember that even this code, I had to look up, so that is about as versed I am in css. Thanks!

2

I am not really sure how do you want the menu responsive style, I inspect your style and remove what you added, it seems the menu on the top bar is just display horizontally.

If you mean broke is your custom style is making the latest menu item drop, you can try to change the margin and padding from % to px.

.menu-item-983 a {
    border: 1px solid #0A0000;
}
.menu-item-990 a {
    border: 1px solid #6998D6;
}
.fl-page-bar .navbar-nav li>a {
    margin: 5px 5px;
    padding: 5px 15px;
}
3

Howdy. Thanks for the quick response. I had read that using percentages was better for responsiveness than a fixed px. but If you think that using a fixed px will work better. I’ll give it a try.

4

Also, I am trying to make the footer font a bit larger, but I can’t find an option for that. I found this on the forum for changing the footer. Is there something similar I can use for increasing the font size of the top menu?

.fl-page-footer .navbar-nav > li > a {
font-family: font-family-here;
font-size: font-size-here;
}
I changed the font size and font family

5

Another question. When I changed the border of the two menu items, suddenly, the third menu item ended up underneath the first two menu buttons. What did I do wrong that they ended up one on top of the other?