Working on this mobile page:
http://mockup.comule.com/ (may contain pop-ups!)
Currently only working on the mobile aspect. When in the mobile view, the yellow menu 'Hamburger' icon is shown. I copied its CSS from elsewhere. Before it was used, the word 'Menu' was in its place. I didn't remove this word - the icon replaced/covered it.
The html markup still shows the word 'Menu' as being present:
Menu
The newly-added CSS:
.handle {
background-color: #990000;
font-size: 0;
line-height: 0;text-align:right;
padding: .75rem .5rem;
display:block;
}
.handle:after {
content: "";
border-color: yellow;
border-style: solid none double;
border-width: 4px 0 12px;
display: block;
height: 4px;
width: 2rem;
}
What I want is the menu icon to appear on the right-hand-side of the bar and the word 'Menu' to re-appear on the left.
What needs to be changed in order for this to happen?
Thanks in advance.
"Menu" written on left and menu icon on right, for this try following:
.handle:after {
content: "";
border-color: yellow;
border-style: solid none double;
border-width: 4px 0 12px;
display: block;
height: 4px;
width: 2rem;
float: right;
margin-top: -4px;
}
.handle {
background-color: #990000;
text-align: left;
padding: .75rem .5rem;
display: block;
line-height: 1.5em;
text-transform: uppercase;
font: 90%/1.3em Arial, Helvetica, sans-serif;
color: white;
font-size: 1em;
}
And for "Menu" on right and icon on left, try this:
.handle:after {
content: "";
border-color: yellow;
border-style: solid none double;
border-width: 4px 0 12px;
display: block;
height: 4px;
width: 2rem;
float: left;
margin-top: -4px;
}
.handle {
background-color: #990000;
text-align: right;
padding: .75rem .5rem;
display: block;
line-height: 1.5em;
text-transform: uppercase;
font: 90%/1.3em Arial, Helvetica, sans-serif;
color: white;
font-size: 1em;
}
Also just to inform, I am not sure about the "margin-top: -4px" in ".handle:after", it would be either -4px or -18px, try it out and let me know which works.
Related
https://codepen.io/danielworton/pen/ZZLEMO
Hello, I'm trying to re-create the button in the codepen linked above and I have an issue adding the stars without changing the script. Also the different colored double border ~ If anyone has any clue to a solution it would be very welcome!
#My solution is as follows:
a {
border: solid 3px #212121;
border-radius: 12px;
background-image: linear-gradient(0deg,#D3D3D3 0%,#D3D3D3 50%,#e8e8e8 51%);
color: #212121;
padding: 20px;
text-align: center;
text-decoration:none;
text-transform: uppercase;
font-family: "Lucida Console", Courier, monospace;
font-size: 18px;
width: 180px;
height: 14px;
display: inline-block;
margin: auto;
}
You can use pseudo elements to add more elements:
a {
border: solid 2px #555;
border-radius: 12px;
background-image: linear-gradient(0deg, #D3D3D3 0%, #D3D3D3 50%, #e8e8e8 51%);
color: #555;
padding: 20px 20px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-family: "Arial";
font-size: 18px;
width: 180px;
height: 14px;
display: inline-block;
margin: auto;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
text-shadow: 1px 1px 1px white;
font-weight: 600;
box-shadow: 0 0 0 6px #D3D3D3, 0 0 0 8px #555;
}
a:after, a:before {
content: '★';
position: absolute;
width: 100%;
left: 0;
top: 0;
display: flex;
align-items: center;
height: 100%;
padding: 0 20px;
box-sizing: border-box;
font-size: 24px;
line-height: 24px;
}
a:before {
justify-content: flex-end;
}
<a href="#">
Checkout
</a>
Although, the amount of borders on that button is kind of ridiculous to expect from one element I think.
Edit: you can add multiple borders with boxshadows
I am using XML menu with ASP.Net to display the menu, and styling them with the custom CSS, The issue is with the menus on Mobile devices.
Consider the below screenshot,
CSS Code,
.menuxml{
display:none;
background-color: #006969;
color: #ffffff;
font-size: 95%;
font-weight: 500;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 20px;
}
.main_menu,
.main_menu:visited,
.main_menu:hover {
text-align: center;
color: #ffffff;
text-align: center;
height: 30px;
line-height: 30px;
margin-right: 8px;
padding-left: 5px;
padding-right: 5px;
}
.main_menu:hover {
background-color: #004949;
color: #ffffff;
}
.level_menu,
.level_menu:visited,
.level_menu:hover {
min-width: 100px;
border-bottom:1px solid #ccc!important;
background-color: #f1f1f1;
color: #000000;
text-align: left;
height: 30px;
line-height: 30px;
padding-left: 7px;
padding-right: 5px;
}
.level_menu:hover {
background-color: #004949;
color: #ffffff;
}
I have tried word-wrap, word-break and display:inline
Live test can be done with https://www.includehelp.com/
Since you used 'white-space: no-wrap' for dropdown options, Add new class to specific dropdown and add css(left: -120px).refer image
As the title says, I'm having issues with the hover action. Not sure what's causing it.
body {
font-family: -apple-system-system-ui,BlinkMacSystemFont, "Gurmukhi MN Regular";
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
}
/* Global */
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
/* Header */
header{
background: #3e3e3e;
color: white;
padding-top: 15px;
min-height: 50px;
}
header a{
color: white;
text-decoration: none;
font-size: 21.73px;
}
header ul{
margin: 0;
padding: 0;
}
header li{
display: inline;
padding: 0 140px 0 140px;
margin-left: 40px;
margin-right: 40px;
text-align: center;
}
header .current a{
font-size: 21px;
font-weight: bold;
border-radius: 12px;
background-color: #2d2d2d;
padding: 8px;
height: 5px;
}
header li a:hover{
font-size: 21px;
font-weight: bold;
border-radius: 12px;
background-color: #2d2d2d;
padding: 8px;
height: 5px;
}
I'm working on my first website for my portfolio. I've done all the markup for the first page and I've started styling it, but I'm stuck on the navigation bar. It's only the hover action that isn't working as I want it to. I'm trying to make it so that there's a rounded box behind it in a darker shade than the navigation bar, but the hover effect moves the text to the right a little bit. I read somewhere that it could be padding but I'm not entirely sure.
Appreciate any help, I'm new to all this.
Alex
The tag in the default state doesn't have the same values of padding and font-size of when it's on hover.
Try correct your code like this:
header a{
color: white;
text-decoration: none;
font-size: 21px;
padding: 8px;
height: 5px;
}
Seems you are using header a for simple action and header li a for hovering kindly try to replace your code with the following, If there is any question feel free to ask, if it solves your problem , then vote up to acknowledge our combine effort.
Thank You.
Best Wishes,
body {
font-family: -apple-system-system-ui,BlinkMacSystemFont, "Gurmukhi MN Regular";
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
}
/* Global */
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
/* Header */
header{
background: #3e3e3e;
color: white;
padding-top: 15px;
min-height: 50px;
}
header a{
color: white;
text-decoration: none;
font-size: 21.73px;
}
header a:hover{
font-size: 21px;
font-weight: bold;
border-radius: 12px;
background-color: #2d2d2d;
padding: 8px;
height: 5px;
}
header ul{
margin: 0;
padding: 0;
}
header li{
display: inline;
padding: 0 140px 0 140px;
margin-left: 40px;
margin-right: 40px;
text-align: center;
}
header .current a{
font-size: 21px;
font-weight: bold;
border-radius: 12px;
background-color: #2d2d2d;
padding: 8px;
height: 5px;
}
I am coding a button with html5 and css3. Here are how it looks in different sizes:
You can see the icons are not in the middle. I know why it happens. But how can I set the icons in middle? Here is my code:
<i class="icon">a</i><span>start</span>
CSS:
.blue-pill {
display: block;
text-decoration: none;
width: 135px;
height: 50px;
margin-bottom: 15px;
position: relative;
background-color: #002032;
border: none;
color: #FFF;
text-transform: uppercase;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
font-size: 14px;
padding: 0;
border-radius: 50px;
cursor: pointer;
z-index: 2;
text-align: center;
line-height: 50px;
-webkit-box-shadow: 0px 5px 0px #1488ae;
-moz-box-shadow: 0px 5px 0px #1488ae;
box-shadow: 0px 5px 0px #1488ae;
}
.blue-pill .icon {
display: inline-block;
margin: 0 5px;
color: #e57125;
font-size: 20px;
}
.blue-pill span {
display: inline-block;
}
.blue-pill.centered {
margin-left: auto;
margin-right: auto;
}
.blue-pill.inline {
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
I am using icon fonts for icons. Here is what I want:
add vertical-align:middle to .blue-pill .icon and .blue-pill span
Example
I hope you all are doing great.
I just wanted to see how my website would look if I moved logo to the right, and the search bar to the left. I edited the style.css to make the logo float right, but when doing that with the search bar, nothing moves ,I tried "center"-ing it and putting it to the "left" but it won't work. Here have a look at some of the code :
/* Horizontal Category List (Default & Flyout) */
#SideCategoryList h2 {
display: block;
border-bottom: #ACA9A9 dashed 1px;
}
/* Logo */
#Logo {
float: left;
margin-bottom: 20px;
}
#Logo h1 {
font-size: 63px;
font-weight: normal !important;
letter-spacing: -1px;
text-transform: none;
padding: 0;
margin: 0 0 15px;
font-family: 'Sacramento', Arial, Sans-Serif;
letter-spacing: normal;
}
#Logo #LogoImage {
}
/* Top Search Form */
#SearchForm{
margin: 15px 0 0 0;
padding: 0px;
width: auto;
position: relative;
border-bottom: 1px dashed #ACA9A9;
overflow: auto;
float: center;
}
#SearchForm form {
padding: 0;
margin: 0;
}
#SearchForm label {
display: none;
}
#SearchForm input {
color: #aca9a9;
width: 145px;
height: 18px;
font-size: 0.8em;
font-weight: 400;
text-transform: uppercase;
padding: 2px 3px 2px 3px;