How to make rounded sides?

Bootstrap Studio Help
1

How do you make the background of hovered menu items like in Bootstrap Studios' website mobile menu? Is there a way in BSS?

2

For your title, the CSS property is border-radius

button {
  border-radius: 10px; //all 4 corners are rounded.
}

https://www.w3schools.com/cssref/css3_pr_border-radius.asp

Now for your post, mobile devices i.e. touch devices don't really do hover, depending on the device they attempt to fake it, because you don't really hover when you touch.

You can try to use the pseudo properties as :focus, :hover, :active to try to help the browser simulate it.

Here's some of the CSS the site is using.

#masthead .site-header-menu a:hover {
    background-color: #090909;
}
a:hover, a:focus, a:active {
    color: #686868;
}
a:hover, a:active {
    outline: 0;
}
a:focus {
    outline: thin dotted;
}
.main-navigation a:hover, .main-navigation a:focus {
    color: #007acc;
}

Saj

3

@Saj thanks it's very useful. Just need to find out where in BSS is that property although custom css works as well.

4

In the app, you can't edit the BSS Bootstrap.css, you have to override it with custom CSS.

For figuring out how things are done on a website, you try to figure that out by right clicking on an element your interested in and selecting "Inspect Element". This will open the Developer tools for whatever browser your using. I believe the more recent Safari does it now too. You'll see the HTML code in the main box and on the right you'll see the CSS that applies to the selected/Inspected Element.

Saj