sir, Your code is so clean. I mean gray background makes it so clear to see. Can you build that 3 column Layout with the top bar like in my code pen?
I’m not sure which codepen you mean but here is another codepen with variations that might help you get what you want.
Bear in mind I just knocked that up in a few seconds from the last demo so needs testing and I’m offline now until tomorrow.
Thanks, I knew this is something very good and it has the minimalistic CSS, but I am finding this very difficult to understand. .content
and .main
are played so well that they are giving a tough time to a beginner like me to comprehend, but I can clearly see that this is a very high-quality design. seeing it, again and again, will help me to get the idea in its entirety.
Nice. I tested to implement your example on OP’s site. It seems to do what he want.
Having all gap marginals on the left side and let the overflow be soaked up out of sight, well done!
@codeispoetry, If you don’t mind me pointing out what you already know;
In narrower viewport the nav and search unevenly break lines and doesn’t align to each other, then the search growing on focus pushes the nav further away.
And the nav links needs to not wrap their text before the item itself breakes to next line.
Also, the html for the search is not semantically correct.
I think all this is easy to fix when you have solved the current issue.
Of course not. Your posts are very enlightening[quote=“Erik_J, post:65, topic:263092”]
In narrower viewport the nav and search unevenly break lines and doesn’t align to each other, then the search growing on focus pushes the nav further away.
[/quote]
Yes, sir, that is a known issue. If I am not mistaking then you are talking about this right?
Can you enlighten me more over this?
I Know its weekend, but in case if someone is present here. Can someone suggest would this design be good in flexbox or some other display: type?
If you are wondering from where we have got this picture then you can go here and search this string →
World news in pictures
Click on any image, and this Pop up will appear that I have shared in the form of the image.
The form is not allowed to have a list-item as a direct child.
Then I would think the search is also a way to navigate the site, so the search could be a nav item too.
And, IIRC? the ID and the name attributes are usually named the same, and the recieving script could take either to handle the query.
Also, the logo can’t be an anchor when it is a sibling to block elements. Inline elements need to be wrapped in a block element when they are among blocks.
I took the liberty to amend the site-header part of the linked page and save as a stand alone you can play with:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>Site Header Example</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="PSPad editor, www.pspad.com">
<style>
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
html, body{ margin:0; box-sizing:border-box}
*, *:before, *:after{ box-sizing:inherit}
body {
margin: 0 auto;
padding-top: 25px;
background: #F9F9F9;
color: #FFF;
font: 1.1em/1.6 sans-serif;
font-family: 'Source Sans Pro', sans-serif;
}
.site-container {
margin: 0 auto;
width:90%;
min-width: 420px;
max-width: 1400px;
}
.site-header {
display: flex;
position: relative;
margin-bottom: 15px;
padding: 30px;
width: 100%;
align-items: center;
text-align: left;
background: #fff;
}
.nav-icon1 {
display: flex;
position: relative;
margin-right: 12px;
width: 42px;
height: 33px;
flex-flow: column nowrap;
justify-content: space-between;
cursor: pointer;
}
#nav-icon1 span {
display: block;
border-radius: 9px;
width: inherit;
height: 6px;
background: #00A2E8;
opacity: 1;
}
.mobile-menu {
display: none;
position: absolute;
margin-top: 190px;
}
.logo a {
display: block;
color: #000;
text-decoration: none;
}
.logo img{
vertical-align:middle;
}
.header-menu {
display: flex;
position: relative;
top:.2em;
margin-left: auto;
flex-flow: row wrap-reverse;
justify-content: flex-end;
align-items: center;
}
.header-menu ul {
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
margin: 0;
padding: 0;
list-style: none;
}
.header-menu ul a {
display:inline-block;
text-decoration: none;
color: #000;
padding: 0 px;
width: 4em;
text-align: center;
white-space: nowrap;
}
.search-form {
padding-left: 7px;
order: 1;
}
.search {
border: 1px solid #CCC;
padding-left: 7px;
width: 8em;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
transition: all .5s ease;
font-size: inherit;
line-height:1.5;
}
.search:focus {
margin-left: -8em;
border-color: #666;
outline: none;
width: 16em;
}
.content {
display: flex;
justify-content:space-between;
height: 50vh;
}
.flex-main {
width:68.8%;
background: white;
order:1;
}
.main-sidebar {
width: 29%;
background: #fff;
color:black;
order:2;
}
</style>
</head><body>
<div class="site-container">
<header class="site-header">
<div id="nav-icon1" class="nav-icon1">
<span></span>
<span></span>
<span></span>
</div>
<nav class="mobile-menu">
<ul id="menu-hamburger-menu" class="menu">
<li id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-21"><a href="./"><i class="fa fa-area-chart" aria-hidden="true"></i> The Menu 1</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-22"><a href="./"><i class="fa fa-line-chart" aria-hidden="true"></i> The Menu 2</a></li>
<li id="menu-item-23" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-23"><a href="./"><i class="fa fa-pie-chart" aria-hidden="true"></i> The Menu 3</a></li>
<li id="menu-item-29" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-29"><a href="./"><i class="fa fa-pie-chart" aria-hidden="true"></i> The Menu 4</a></li>
<li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-30"><a href="./"><i class="fa fa-pie-chart" aria-hidden="true"></i> The Menu 5</a></li>
<li id="menu-item-31" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-31"><a href="./"><i class="fa fa-area-chart" aria-hidden="true"></i> The Menu Link 1</a></li>
</ul>
</nav>
<div class="logo"><a href="./#"><img src="./logo.png" alt=""></a></div>
<nav class="header-menu">
<form class="search-form" action="./" method="get">
<input id="search" class="search" type="search" name="s" placeholder="Search" value="">
</form>
<ul id="menu-menu-1" class="menu">
<li id="menu-item-4" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-4"><a href="./">Menu 0</a></li>
<li id="menu-item-26" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-26"><a href="./">Menu 1</a></li>
<li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-27"><a href="./">Menu 2</a></li>
<li id="menu-item-28" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-28"><a href="./">Menu 3</a></li>
</ul>
</nav>
</header><!-- site-header -->
<div class="content">
<div class="flex-main"></div>
<aside class="main-sidebar col"></aside>
</div>
</div>
</body></html>
Hope I’ve got your design intention right.
Should I infer from this as if the pure anchor tag in this case are standing naked and we need to wrap them in a
Actually, there are many classes that are rendered by the Wordpress, the actual code of the menu + search is like this →
<nav class="header-menu">
<ul>
<?php
wp_nav_menu( array(
'theme_location' => 'main-menu',
'container' =>false
) );
?>
</ul>
</nav>
<form action="<?php echo esc_url( home_url( '/' ) ); ?>" method="get">
<li>
<input class="search" type="search" placeholder="Search" type="text" name="s" id="search" value="<?php the_search_query(); ?>">
</li>
</form>
I think we can’t put the form inside the Nav.
It’s been a long time I am reopening this thread. I have made a minor change in the naming of the classes for my better understanding. https://codepen.io/codeispoetry/pen/eRvBJj
Sir, Could this be further simplified or I can use them as it is my projects?
That looks ok to me.
There are always ways to refactor code but sometimes reducing classes and styles does not reduce simplicity. As long as there is no obvious duplication and you are happy with the format I prefer to keep things easy to read and use rather than purely reducing classes and styles to a bear minimum.
for a beginner like me the code looks very high class to me, but at the same time very confusing. If I will convert this into a fully functional HTML templates I might get confused. If I increase certain classes then that might be ok to me. If I increase classes such as for the smaller sidebar or the inner sidebar If I say inner-sidebar instead of the sidebar.
Doing so will make look Layout cheaper, less sophisticated, less professional as compared to your compact and precise version?
Hi, your post seems to have disappeared but I have examples of consistent gutters in my flexbox patterns examples.
See Example 11 onwards and the code for comments.
Initially, i posted and then I though that you are on vacation so decided to delete that.
No worries I’ll still check in occasionally while I’m away
If you have a new question unrelated in essence to this thread then start a new topic and someone else will answer if I’m not around.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.