There is a "show preview" / "hide preview" button that appears in edit mode between the textarea and the preview container. This toggle allows, well, to show and hide this preview.
So of course I thought that would solve my problem, until I realize that all it does is to set a display: none on the container.
-> NOT WORKING :( WHY
.panel-item {
position: relative;
margin-top: -1px;
}
.panel-title {
cursor: pointer;
min-height: 110px;
border: 1px solid #FEE4CF;
border-radius: 6px;
padding: 15px 65px 15px 20px;
background-image: url(https://cdn.myshoptet.com/usr/www.manulo.cz/user/documents/upload/sablona/arrow-down.svg);
background-repeat: no-repeat;
background-position: right 20px center;
}
.flex-between-center {
display: flex;
align-items: center;
justify-content: space-between;
}
.panel-title > div:first-of-type {
max-width: 540px;
}
.flex-center-wrap {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.in-doprava-a-platba .panel-title > div img {
margin-right: 20px;
}
img {
max-width: 100%;
height: auto;
}
.panel-body {
display: none;
padding: 0 20px 25px;
}
.type-page .content-wrapper-in ul {
list-style-type: none;
padding-left: 0;
}
.type-page .content-wrapper-in ul li {
font-size: 14px;
padding-left: 12px;
position: relative;
margin-bottom: 8px;
}
.type-page .content-wrapper-in ul li::before {
content: '';
width: 6px;
height: 6px;
display: block;
background-color: #AE6830;
border-radius: 50%;
position: absolute;
left: 0;
top: 6px;
}
.panel-show + .panel-body {
display: block;
}
#media screen and (max-width: 991px){
.panel-title {
background-size: 20px auto;
background-position: right 10px center;
padding: 15px 40px 15px 15px;
}
.panel-title > div > span, .panel-title > div > p {
font-size: 18px;
margin: 0 !important;
}
.panel-title.panel-show + .panel-body {
background-color: #FEE4CF;
display: block;
border: 1px solid #FEE4CF;
border-top: none;
border-radius: 0 0 6px 6px;
}
.panel-show + .panel-body {
display: block;
}
.panel-body {
padding: 0 20px 25px;
display: none;
}
.panel-body {
padding: 0 15px 25px;
}
}
<div class="panel-item">
<div class="panel-title flex-between-center">
<div class="flex-center-wrap"><img src="https://cdn.myshoptet.com/usr/446290.myshoptet.com/user/documents/upload/sablona/ppl.svg"> <span>PPL</span></div>
<div><span>99 Kč</span></div>
</div>
<div class="panel-body">
<ul>
<li>Když nakoupíte od 1900 Kč, máte dopravu zdarma. Jinak doručení stojí 99 Kč.</li>
<li>doručení a kontaktem na řidiče pro pohodlnější domluvu.</li>
<li>zkusí to ještě následující pracovní den. Následně váš balík uloží na nejbližší PPL zasielka.</li>
</ul>
</div>
</div>
where is problem not show and hide..
The quickest solution is
to change the .panel-title into an anchor tag <a>, making it an element that can receive focus.
and with CSS combinator selector +, the .panel-body can be toggled in/visible when the <a> loses/gets focus using the :focus pseudo selector.
I made those changes for you and added a second panel-item in <body> so you can see the accordion mechanism at work.
I also removed obsolete .panel-show references and cleaned up the #media.
Notice the two href="javascript:void(0)", without a href defined, an <a> cannot receive focus making the accordion fail to work...
Check the below snippet
/* NEW */
.panel-title {
/* To override standard <a> markup */
text-decoration: none;
color: currentColor;
}
.panel-title:focus+.panel-body {
/* make it visible */
display: block;
}
/**/
.panel-item {
position: relative;
margin-top: -1px;
}
.panel-title {
cursor: pointer;
min-height: 110px;
border: 1px solid #FEE4CF;
border-radius: 6px;
padding: 15px 65px 15px 20px;
background-image: url(https://cdn.myshoptet.com/usr/www.manulo.cz/user/documents/upload/sablona/arrow-down.svg);
background-repeat: no-repeat;
background-position: right 20px center;
}
.flex-between-center {
display: flex;
align-items: center;
justify-content: space-between;
}
.panel-title>div:first-of-type {
max-width: 540px;
}
.flex-center-wrap {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.in-doprava-a-platba .panel-title>div img {
margin-right: 20px;
}
img {
max-width: 100%;
height: auto;
}
.panel-body {
display: none;
padding: 0 20px 25px;
}
.type-page .content-wrapper-in ul {
list-style-type: none;
padding-left: 0;
}
.type-page .content-wrapper-in ul li {
font-size: 14px;
padding-left: 12px;
position: relative;
margin-bottom: 8px;
}
.type-page .content-wrapper-in ul li::before {
content: '';
width: 6px;
height: 6px;
display: block;
background-color: #AE6830;
border-radius: 50%;
position: absolute;
left: 0;
top: 6px;
}
#media screen and (max-width: 991px) {
.panel-title {
background-size: 20px auto;
background-position: right 10px center;
padding: 15px 40px 15px 15px;
}
.panel-title>div>span,
.panel-title>div>p {
font-size: 18px;
margin: 0 !important;
}
/* Cleaned the clutter and removed obsolete code */
.panel-title:focus+.panel-body {
background-color: #FEE4CF;
display: block;
border: 1px solid #FEE4CF;
border-top: none;
border-radius: 0 0 6px 6px;
padding: 0 15px 25px;
}
/**/
}
<div class="panel-item">
<a class="panel-title flex-between-center" href="javascript:void(0)">
<div class="flex-center-wrap">
<img src="https://cdn.myshoptet.com/usr/446290.myshoptet.com/user/documents/upload/sablona/ppl.svg"> <span>PPL</span>
</div>
<div><span>99 Kč</span></div>
</a>
<div class="panel-body">
<ul>
<li>Když nakoupíte od 1900 Kč, máte dopravu zdarma. Jinak doručení stojí 99 Kč.</li>
<li>doručení a kontaktem na řidiče pro pohodlnější domluvu.</li>
<li>zkusí to ještě následující pracovní den. Následně váš balík uloží na nejbližší PPL zasielka.</li>
</ul>
</div>
<a class="panel-title flex-between-center" href="javascript:void(0)">
<div class="flex-center-wrap">
<img src="https://cdn.myshoptet.com/usr/446290.myshoptet.com/user/documents/upload/sablona/ppl.svg"> <span>PPL</span>
</div>
<div><span>99 Kč</span></div>
</a>
<div class="panel-body">
<ul>
<li>Když nakoupíte od 1900 Kč, máte dopravu zdarma. Jinak doručení stojí 99 Kč.</li>
<li>doručení a kontaktem na řidiče pro pohodlnější domluvu.</li>
<li>zkusí to ještě následující pracovní den. Následně váš balík uloží na nejbližší PPL zasielka.</li>
</ul>
</div>
</div>
Related
We are trying to create a chatbot application. The input where user enters the text and 'send' button are inside a div. The div width is 100%. This is working good in the laptop and on all the mobiles except Iphone14 where the send button is getting cutoff. Below is the code.
.chat-container {
background: #fff;
height: 100%;
overflow: hidden;
padding: 0;
border-right: 1px solid #d8dada;
border-left: 1px solid #d8dada;
}
.chat-container>div:last-of-type {
position: absolute;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
padding-right: 10px;
}
body>div>div>div:nth-child(2)>span {
background: #dadada;
padding: 10px;
font-size: 21px;
border-radius: 50%;
}
body>div>div>div.message-data-right.macro {
margin: auto;
margin-left: 1%;
}
.chat-header {
background-color: #ffffff;
height: 3.5rem;
line-height: 3.5rem;
color: #000000;
border-bottom: 1px solid #000000;
position: relative;
}
.chat-header-content {
align-content: center;
padding-top: 10px;
padding-bottom: 10px;
}
.header-img {
height: 24px;
width: 106px;
transform: scale(0.85);
vertical-align: middle;
content: url('./../images/vz_logo.svg');
}
.gray-button {
background-color: #5b5b5b;
border: none;
color: white;
padding: 10px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
font-family: Roboto-Medium;
border-radius: 4px;
}
.chat-ul {
width: 100%;
list-style-type: none;
padding: 18px 18px 3px 18px;
position: absolute;
bottom: 62px;
display: flex;
flex-direction: column;
top: 3.5rem;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #909296 #dee0e2;
background-color: #f6f6f6;
margin-bottom: 0%;
border-bottom: 1px solid #c1c1c1;
}
.entered-text {
border-width: 1px;
border-radius: 5px;
padding: 10px;
background: #f6f6f6;
width: 100%;
border-color: #c1c1c1;
}
.text {
width: 100%;
display: flex;
flex-direction: column;
}
.text>p:first-of-type {
width: 100%;
margin-top: 0;
margin-bottom: auto;
line-height: 13px;
font-size: 13px;
}
.text>p {
width: 100%;
margin-top: 0;
margin-bottom: auto;
line-height: 13px;
font-size: 13px;
}
.text>p:last-of-type {
width: 100%;
text-align: right;
margin-bottom: -2px;
margin-top: auto;
}
.text-right {
float: right;
font-family: Arial;
position: relative;
}
.send-message {
width: 100%;
border-radius: 0px;
padding: 10px;
display: flex;
}
input:focus {
outline: none;
}
button,
button:focus,
button:active {
outline: none;
}
<div class="chat-container">
<header class="chat-header">
<img class="header-img" />
<button type="button" class="icon-close" onClick="closeChatWindow()"></button>
</header>
<ul class="chat-ul"></ul>
<div>
<div class="send-message">
<div class="text text-right">
<input class="entered-text" />
</div>
</div>
<button id="send" class="gray-button" type="button" onClick="onMessageSend()"> Send </button>
</div>
</div>
Our testing team raised a bug saying that send button gets cutoff on IPhone14. I am not sure how to reproduce the issue as I don't have Iphone14. I have Android phone on which code is working fine. On Pc also, I tested on different browsers all are working fine. I used toggle device toolbar under developer tools to check how it looks like for different devices and used responsive to change width and height. I am not able to reproduce the issue. Below is the image where it got reproduced on Iphone14.
At the end of the image 'Send' grey color button is cutoff. Can any one please let me know how to resolve the issue.
You don't need an iPhone to see this. It's apparent in Chrome for me. Use the emulator in the dev tools if you like.
Remove the float (.text-right) from the layout
Take the 100% width off the input and .send-message
Move the flex class up a level to contain both the input and the button
I've also added some left margin to the button.
I've fixed a great many such situations in my career, and more often than not the solution involves removing unnecessary styling to simplify. You might work though your entire layout and do so.
.gray-button {
background-color: #5b5b5b;
border: none;
color: white;
padding: 10px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
font-family: Roboto-Medium;
border-radius: 4px;
margin-left: 10px;
}
.entered-text {
border-width: 1px;
border-radius: 5px;
padding: 10px;
background: #f6f6f6;
border-color: #c1c1c1;
}
.text {
width: 100%;
display: flex;
flex-direction: column;
}
.send-message {
border-radius: 0px;
padding: 10px;
display: flex;
}
input:focus {
outline: none;
}
button,
button:focus,
button:active {
outline: none;
}
<div class="chat-container">
<div class="send-message">
<div class="text">
<input class="entered-text" />
</div>
<button id="send" class="gray-button" type="button" onClick="onMessageSend()"> Send </button>
</div>
</div>
The most straightforward way to solve this is to is use the CSS calc() function to give input.entered-text a flexible width which will always accommodate the width of the <button>:
e.g. If you give button#send a fixed width (width: 100px), then you can give input.entered-text a width that can accommodate that fixed width (width: calc(100% - 100px))
Example:
#send {
display: inline-block;
width: 100px;
margin-left: 12px;
box-sizing: border-box;
}
.entered-text {
display: inline-block;
width: calc(100% - 12px - 100px);
box-sizing: border-box;
}
Im no expert but should you put a <br> in the div
edit:
line breaks are usually unnecessary so I would say only use this temporary until you find the solution
I'm trying to altar two buttons (Easy, Hard) on a web app I'm building. I am trying to alter them to remove their borders, and when a button is selected, I want to background to flow up into the header as a visual indication for being selected.
Note: I am linking Bootstrap 4 at the moment.
Current Visual:
Desired Visual:
body {
background-color: #232323;
}
.header {
text-align: center;
color: white;
padding: 1.5rem;
background-color: #66b0c4;
}
.header h1 {
margin: 0;
}
.square {
width: 30%;
background: purple;
padding-bottom: 30%;
float: left;
margin: 1.66%;
}
#container {
max-width: 600px;
margin: 0 auto;
}
#stripe {
background-color: white ;
height: 30px;
text-align: center;
color: black;
}
.selected {
background:#66b0c4;
border: none;
}
<div class="header">
<h1>The Great <br><span id="colorDisplay">RGB</span><be>
Color Game</h1>
</div>
<div id="stripe">
<button id="reset">New Colors</button>
<span id="message"></span>
<button id="easyBtn">Easy</button>
<button id="hardBtn" class="selected">Hard</button>
</div>
I hope this can help you.
body {
background-color: #232323;
}
.header {
text-align: center;
color: white;
padding: 1.5rem;
background-color: #66b0c4;
}
.header h1 {
margin: 0;
}
.square {
width: 30%;
background: purple;
padding-bottom: 30%;
float: left;
margin: 1.66%;
}
#container {
max-width: 600px;
margin: 0 auto;
}
#stripe {
background-color: white ;
height: 30px;
text-align: center;
color: black;
padding-top: 5px;
}
.selected {
background:#66b0c4;
border: 0;
padding: 5px;
position: relative;
}
.selected::before {
position: absolute;
content: '';
top: -10px;
left: 0;
width: 100%;
background-color: #66b0c4;
height: 10px;
}
<div class="header">
<h1>The Great <br><span id="colorDisplay">RGB</span><be>
Color Game</h1>
</div>
<div id="stripe">
<button id="reset">New Colors</button>
<span id="message"></span>
<button id="easyBtn">Easy</button>
<button id="hardBtn" class="selected">Hard</button>
</div>
Solved by adjusting the height of background on the selected class. Also solved the selection issue with
*:focus {
outline: 0 !important;
}
CSS Now:
.selected {
background:#66b0c4;
border: none;
height: 30px;
}
*:focus {
outline: 0 !important;
}
I am creating HTML and CSS with this design proposal:
But my result is:
HTML code:
<div className="project_content">
<div className="project_quick f_bold" id="tab">
<a><span>업데이트</span><span className="alral_num">1</span></a>
<a><span>커뮤니티</span><span className="alral_num">34</span></a>
<a><span>통계</span></a>
</div>
</div>
CSS code:
.alral_num {
height: 20px;
padding: 2px 7px 0 7px;
margin: 0 0 0 5px;
display: inline-block;
background: #e8351d;
border-radius: 15px;
text-align: center;
color: #fff;
line-height: 1.2;
}
.project_content .project_quick .alral_num {
position:relative;
width: 20px;
display: table;
left: 20%;
margin-top: 5px;
}
.project_quick a {
height: 60px;
padding: 20px 40px 20px;
display: inline-block;
font-size: 16px;
background: url(../../assets/images/line01.gif) no-repeat right 50%;
}
.project_quick a:last-child{
background: none
}
.f_bold {
font-weight: 700 !important;
}
I want to show numbers over border
I have tried position:fixed, But i have to scroll vertically or horizontally, and the numbers should be moved when it scrolls. so it didn't work.
I am making a Image upload result box, somehow I managed to give it proper layout but elements of the result box doesn't seem right in 'Brackets View'
I struggle when it comes to use floats, clear and display. I get confused, I've tried to learn it 4-5 times till now but somewhere I fail to apply them properly.
Can someone guide me through this code while explaining when and where to use them..
Also, I use this technique to clear floats but sometimes it works and sometimes nothing happens:
.example
{
content: ' ';
display: block;
clear: both;
}
My HTML & CSS:
.files-bar {
width: 100%;
max-width: 700px;
margin: 20px auto;
padding: 15px;
overflow: auto;
border: 1px solid #BBBBBB;
box-shadow: 2px 3px 15px #E7E7E7;
}
.delete {
float: right;
background-color: #02BFC1;
color: #FFFFFF;
font-family: gothic;
width: 100%;
max-width: 75px;
border: 1px solid #02BFC1;
font-size: 10pt;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
.image-thumb {
float: left;
display: inline;
width: 160px;
height: 120px;
margin-right: 20px;
}
.img-thumb:after {
content: '';
display: block;
clear: both;
}
.image-name {
font-size: 17pt;
margin-top: 2px;
}
.image-size {
font-size: 13pt;
margin: 20px 0;
}
.file-status {
display: block;
font-size: 12pt;
margin-bottom: 10px;
}
.progress-wrap {
float: left;
width: 300px;
height: 20px;
color: #111;
height: 5px;
margin-top: 5px;
}
.progress-meter {
max-width: 300px;
height: 5px;
background: #02BFC1;
}
.up {
margin-left: 30px;
}
.cancel-upload {
float: left;
margin: -25px 0 0 -15px;
}
<div class="files-bar">
<button class="manage-btn delete">Delete</button>
<img class="image-thumb" src="profile_image/2861e205148ccebc01cb9b1d8a4c6b0c.jpg">
<p class="image-name">14217596f69f44507b.jpg</p>
<p class="image-size">22 KB</p>
<p class="file-status">File Uploaded Successfully!</p>
<div class="progress-wrap">
<!-- Progress bar -->
<div class="progress-meter"></div>
</div>
<p class="cancel-upload">✖</p>
</div>
Float is not a good strategy for layout as it requires managing floats with clear:both. clear will clear any floats defined previously, in this case your delete button that is floated right.
Please see this quick reference on float and clear properties.
As mentioned in a comment above, using display:flex will give you greater control over layout. Here is a solution with minimal change to your original code. I set display:flex on the container defined by div files-bar, created a container for progress and one for the delete button. Together with the img, these sibling elements are flex items. Here is a good tutorial on using flex.
And the complete code:
.files-bar
{
width: 100%;
max-width: 700px;
margin: 20px auto;
padding: 15px;
overflow: auto;
border: 1px solid #BBBBBB;
box-shadow: 2px 3px 15px #E7E7E7;
display:flex;
}
.delete
{
background-color: #02BFC1;
color: #FFFFFF;
font-family: gothic;
max-width: 75px;
border: 1px solid #02BFC1;
font-size: 10pt;
padding: 10px;
border-radius: 5px;
cursor: pointer;
display:inline-block;
}
.button-cell {
text-align:right;
flex-grow:1;
}
.image-thumb
{
display: inline;
width: 160px;
height: 120px;
margin-right: 20px;
}
.image-name
{
font-size: 17pt;
margin-top: 2px;
}
.image-size
{
font-size: 13pt;
margin: 20px 0;
}
.file-status
{
display: block;
font-size: 12pt;
margin-bottom: 10px;
}
.progress-wrap
{
float: left;
width: 300px;
height: 20px;
color: #111;
height: 5px;
margin-top: 5px;
}
.progress-meter
{
max-width: 300px;
height: 5px;
background: #02BFC1;
}
.up
{
margin-left: 30px;
}
.progress {
position:relative;
}
.cancel-upload
{
position:absolute;
right:4px;
bottom:2px;
}
<div class="files-bar">
<img class="image-thumb flex-item" src="profile_image/2861e205148ccebc01cb9b1d8a4c6b0c.jpg">
<div class="progress">
<p class="image-name">14217596f69f44507b.jpg</p>
<p class="image-size">22 KB</p>
<p class="file-status">File Uploaded Successfully!</p>
<div class="progress-wrap"> <!-- Progress bar -->
<div class="progress-meter"></div>
</div>
<p class="cancel-upload">✖</p>
</div>
<div class="button-cell">
<button class="manage-btn delete flex-item">Delete</button>
</div>
</div>
UPDATE – New snippet using absolute position within a relative positioned container.
Please review the following solution. Instead of using float, I positioned the elements absolute within the files-bar container. This will work in any browser.
.files-bar
{
width: 100%;
max-width: 700px;
margin: 20px auto;
padding: 15px;
overflow: auto;
border: 1px solid #BBBBBB;
box-shadow: 2px 3px 15px #E7E7E7;
position:relative;
}
.delete
{
background-color: #02BFC1;
color: #FFFFFF;
font-family: gothic;
max-width: 75px;
border: 1px solid #02BFC1;
font-size: 10pt;
padding: 10px;
border-radius: 5px;
cursor: pointer;
position:absolute;
right:12px;
}
.image-thumb
{
display: inline;
width: 160px;
height: 120px;
margin-right: 20px;
float:left;
}
.image-name
{
font-size: 17pt;
margin-top: 2px;
}
.image-size
{
font-size: 13pt;
margin: 20px 0;
}
.file-status
{
display: block;
font-size: 12pt;
margin-bottom: 10px;
}
.progress {
position:absolute;
left:185px;
}
.progress-wrap
{
width: 300px;
height: 20px;
color: #111;
height: 5px;
margin-top: 5px;
}
.progress-meter
{
max-width: 300px;
height: 5px;
background: #02BFC1;
}
.up
{
margin-left: 30px;
}
.cancel-upload
{
position:absolute;
right:4px;
bottom:2px;
}
<div class="files-bar">
<img class="image-thumb" src="profile_image/2861e205148ccebc01cb9b1d8a4c6b0c.jpg">
<div class="progress">
<p class="image-name">14217596f69f44507b.jpg</p>
<p class="image-size">22 KB</p>
<p class="file-status">File Uploaded Successfully!</p>
<div class="progress-wrap"> <!-- Progress bar -->
<div class="progress-meter"></div>
</div>
<p class="cancel-upload">✖</p>
</div>
<button class="manage-btn delete flex-item">Delete</button>
</div>
Layout Problem Solved!
The problem was that I wanted to put image on the left and other contents to the right of the image.
But there was too much use of floats, clear and display it was confusing also code was improper. And even though using them I was not getting the proper output. As the 'paragraph' element was also behind the image due to floats.
So, after some more trials I achieved that layout I wanted without using 'position' and too much of floats and clear.
What I Applied:
First, Floated the image to the left.
Put all of the other content below image inside a div class named 'rest'.
Floated 'rest div' to the left too.
Floated delete button to the right.
At last I've applied Clear Fix for "files-bar div."
It was simple that's it. All other elements adjusted itself. I just needed to put all other contents inside a div element and float it.
Updated HTML:
<div class="files-bar">
<button class="delete">Delete</button>
<img class="image-thumb" src="profile_image/1777859bb71d37aec3.jpg">
<div class="rest">
<p class="image-name">14217596f69f44507b.jpg</p>
<p class="image-size">22 KB</p>
<p class="file-status">File Uploaded Successfully!</p>
<p class="cancel-upload">✖</p>
<div class="progress-wrap">
<div class="progress-meter"></div>
</div>
</div>
</div>
Default HTML's CSS has been removed which is also known as 'Doctor CSS'
Updated CSS:
.files-bar
{
width: 100%;
max-width: 600px;
padding: 15px;
border: 1px solid #BBBBBB;
box-shadow: 2px 3px 15px #E7E7E7;
}
.files-bar:after
{
clear: both;
content: '';
display: block;
}
.image-thumb
{
float: left;
width: 160px;
height: 120px;
margin-right: 20px;
}
.rest {float: left;}
.delete
{
float: right;
width: 100px;
background-color: #02BFC1;
color: #FFFFFF;
font-family: gothic;
max-width: 75px;
border: 1px solid #02BFC1;
font-size: 10pt;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
.image-name {font-size: 17pt;}
.image-size
{
font-size: 13pt;
margin: 20px 0;
}
.file-status
{
display: inline-block;
font-size: 12pt;
margin-bottom: 15px;
}
.progress-wrap
{
width: 300px;
height: 20px;
color: #111;
height: 5px;
}
.progress-meter
{
max-width: 300px;
height: 5px;
background: #02BFC1;
}
.cancel-upload
{
padding: 5px;
float: right;
cursor: pointer;
}
Having trouble getting my image to center, while remaining on the same horizontal level as my icon.
HTML
<div class="smalltop w3-top">
<span class="w3-opennav w3-xlarge" onclick="w3_open()"><i id="menui" class="material-icons w3-xxlarge">menu</i></span>
<img id="smalllogo" src="img/navlogo-invert.jpg">
</div>
CSS
#smalllogo {
max-height: 50px;
width: auto;
display: block;
margin: 0 auto;
border: 5px solid;
margin-top: 5px;
}
#menui {
left: 0;
}
.smalltop {
background-color: #FFF;
list-style-type: none;
margin: 0 auto;
}
https://jsfiddle.net/pzLbruhx/
Add relative positioning to the container and absolute positioning to the icon
#menui {
left: 0;
position:absolute;
}
.smalltop {
background-color: #FFF;
list-style-type: none;
margin: 0 auto;
position:relative;
}
jsFiddle example
Just give property float:left to #menui, and see the result
Use display:table\table-row\table-cell and vertical-align on icon
#smalllogo {
max-height: 50px;
width: auto;
display: table-cell;
margin: 0 auto;
border: 5px solid black;
margin-top: 5px;
}
.w3-opennav {
display: table-cell;
vertical-align: middle;
}
.smalltop {
background-color: #FFF;
list-style-type: none;
margin: 0 auto;
display: table-row;
}
Fiddle