I've been scouring the internet and Squarespace forum for answers to this problem, but so far can't find any luck! I understand basic code and CSS but can't seem to figure this one out myself :(
I'm trying to make a line of anchor links on an Index with equidistant text links on a line. When I view what I have now via Tablet or Phone view, they get broken up in a janky way.
Is there a way either: restrict this so they stay on one line or adjust in a way so they neatly stack on top on one another?
I'm trying to recreate something to the "Community Workspace Progamming" link effect here (https://www.the-wing.com/why-the-wing/)
The images of what's going on with my site in Tablet view are attached.
image here
If you're looking for simply stacking them on top when the screen becomes smaller (like in a phone or tablet, then this will do:
.menu li {
list-style-type: none;
display: inline-block;
padding-right: 30px;
}
#media (max-width: 760px) {
.menu li {
display: block;
text-align: center;
}
}
<div class="menu">
<li><h2>LOCATIONS</h2></li>
<li><h2>EVENTS</h2></li>
<li><h2>PERSONAL STYLING</h2></li>
</div>
It changes according to screen size, so it's all in a line in screens bigger than 760px, and it becomes stacked in smaller screens. You can change that size at the #media to suit your needs.
However, the site you've linked is using what's called a burger menu. Here's a good implementation that I found online, but it's a bit more complicated to implement.
I don't know anything about Squarespace, but if I were you, I would look for my template's Burger Menu in the template's documentation. I hope this helps!
Related
Website: www.tarbooshla.com
When viewed on a mobile device, the search icon is not aligned with the rest of the navbar (the logo and the menu icon). How can I fix this?
I have tried updating all the themes and plugins to no avail.
It seems to be displaying exactly as intended with the current rule set. I'm assuming you want it to populate on the right? I was able to move it substantially with the padding property, however I don't think that's the best scenario for you. The search icon is currently not text at all, but a pseudo element displayed in an ::before scenario, if you want it to show up after when it reaches a certain size, I recommend having a media query that sets it to display:none; and an ::after pseudo element that displays when it gets to your smart phone #media and screen (max-width) size.
It is happening because of the limited space in mobile devices.So what you can do is go inside the header.php and put the search bar inside the main navigation bar along with home,about us, etc so search will appear once the user press menu button.or with the help of css,align the menu to the left so that search button can fit into the right.
This code may help you. Make sure to add this CSS code at a place so that it loads after all other css is loaded ( therefore taking maximum priority )
#media only screen and (max-width: 767px) {
#Top_bar .logo {
text-align: left;
}
#Top_bar .top_bar_left {
float: left;
width: 80% !important;
margin-top: 10px;
background: none !important;
}
.header-classic #Top_bar .top_bar_right {
top: 15px;
float: right;
}
}
I'm having trouble on a clients website.
In the header, I have their address and social media icons. Everything is the way they want it until the width starts to shrink to more of a mobile view. I've been trying to change the text-align of .social and .address from right to center when the small-12 grid size kicks in. However, for all my efforts, it either stays with one or the other and doesn't switch when the grid system switches.
I've deleted my efforts currently in hopes that someone can help me with a better implementation method.
You can use media-queries. Look them up here - https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Add the following CSS style to your website (either in the app.css file or any other file that you include in your target page.)
.social-icons{
float:right;
}
#media (max-width: 600px) {
.social-icons {
float: left;
}
}
The above CSS would float any element with class .social-icons to right by default.
In case the website is being viewed on a media screen which has a screen width less than 600px, would float it left.
I'm working on a site using the Bootstrap framework and noticed that on mobile devices there's an empty white margin on the right hand side of the window. I believe this is some sort of issue with the tag although I can't pinpoint it.
There are 20px margins but if I remove them the .brand logo shifts partially off the screen on the right hand side.
You can view the problem here.
Sorry to not provide the code here. I'm just not even sure which CSS to provide as I can't identify the problem.
In the block which had the heading 'Download original swipe files to ensure your success.' you have the text, an image to the side, and the caption 'one click download of swipe file'
The caption is actually a svg file and I think at some viewports it's too wide for the bootstrap column and it's disrupting the grid. I can't tell for sure, but you could try temporarily removing the caption and see what happens.
The behaviour I'm describing is most obvious when the browser window is around 780px ... it's always possible that we are looking at different things ;)
Good luck!
.navbar .brand has
margin-left:-20px;
so the behavior seems normal to me.
Set it back to 0 via your mediaquerie
edit : remove padding on body at :
#media (max-width: 767px)
body {
padding-right: 20px;
padding-left: 20px;
}
and margin at .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top :
#media (max-width: 767px)
.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
margin-right: -20px;
margin-left: -20px;
}
Site URL: http://scc.maxworks.org/wo-wp0001/
I needed to get the search box into the nav menu at the top of the site, which I did (it's a div inside an unordered list) and it places where i want it to when on a computer screen. now i'm trying to get it to behave as I would like to when on a tablet or phone - which is that I'd like to to align to the left side of the screen when you click the menu icon to open the list. (Actually i'd like the search box to appear next to the menu icon but i think thats beyond my skill to do at this time. So i'm trying to align it to the left when in the smaller views.
I am using bootstrap.
in bootstrapwp.css
find
ul#main-menu.nav li form#searchform div {
display: block;
overflow: hidden;
padding: 0 0 0 380px;
}
remove padding
ul#main-menu.nav li form#searchform div {
display: block;
overflow: hidden;
}
I think you want to check this out. You could use the Responsive utility classes. So put 2 searchboxes in and hide on the not wanted resolution. Might be not the ultra super best way but it works and it is quick.
There might be some fancy js way to accomplish this, can't help you there.
I'm wondering how mashable.com hides its menu button - which appears in the top right hand corner - when the page is above a certain width and disappears when the page is below a certain width. A specific CSS rule:
html.no-touch .main-menu li.menu
{
display: none;
}
takes precedence over the rule that displays the icon:
.navbar .nav > li
{
display:block;
float: left;
}
but I can't see how it's doing it since disabling JavaScript appears to cause no ill effects and none of Css classes applied to parent elements seem to change. It seems that:
html.no-touch .main-menu li.menu
{
display: none;
}
should always take precedence, but clearly doesn't and somehow this appears to have been accomplished solely with CSS and I'm curious to know how.
A graphic illustrating this is here.
They are using css #media queries to show and hide different elements at different resolutions.
Mashable.com uses Skeleton which is a very good resposive website design framework. It has well defined #media queries to hide or display divs depending on viewport size.