Mobile Menu
Hi- I was hoping to get some help on how to add spacing underneath my custom home icon and my name in my Blogger mobile menu (I attached a pic). I apologize but this is a custom Blogger template but the author doesn't have any time to help me.
Thank you so much! www.thenorthernmagnolia.com
Add this CSS code to your template
#media (max-width: 767px) {
.menu-home-icon img {
margin-bottom: 20px;
}
}
Related
I have created a page in react js. I have displayed content on the left side and images on the right side. I want to show the image on full-screen onclick of the image.
Thanks
Sorry for the incomplete questions.
I solved my problem.
on image click I have called below function:
openFullscreen () {
document.getElementById('image')?.requestFullscreen()
}
Just use CSS viewport units: width: 100vw; and height: 100vh;
I am using react bootstrap Carousel in my react js code. I am successfully able to customize react bootstrap Carousel indicators. By using below code..
div.crausal ol li{
height: 0.3em;
width: 4em;
background-color: #E77728 !important;
}
But I am not able to change the color of active class for indicator. I have tried this
div.crausal ol li.active{
background-color: blue !important;
}
But it does not work.
This is my carousel class.
<Carousel className={css_class.crausal} touch={true} controls={false}>
// Carousel items goes here //
</Carousel>
I want to change the color of active class indicator.
If someone can give better carousel option other than react bootstrap to solve this issue that will also do
I found a kind of fix after researching longer. What you can do is add normal bootstrap file in your project, import it in your component file and now react bootstrap classes are overridden by this normal bootstrap import. After that you can customize the normal bootstrap file downloaded in your project (bootstrap.min.css). But this is just a fix.
What you can do is:
div.carousel-indicators .active{
background-color: #E77728 !important;
}
I have a control bar with some buttons, but they overlap in mobile, so i want hide some of the buttons and display them in a menuItem when resizing to mobile?
any idea?
Add a class to the buttons you want to hide. For example, className=hideMe. Then in the CSS file, add a responsive media styling
#media only screen and (max-width: 600px) {
.hideMe {
display: none;
}
}
This will hide those buttons when the screen width is 600px or smaller
I am very new to saleforce and playing around to get to know how things work.
How do i remove that home button there and can i move that cases and products menu items to right side?
Can you please help check
You can use a CSS hack to hide the Home icon and option
Click on the Pen icon in the builder and then the CSS button next to the word Branding at the top.
.navigationMenuNode:first-child {
display: none;
visibility: hidden;
}
In the latest version of Salesforce/Experience Builder the following can be used to hide just the home tab or the entire navigation menu which is what I needed.
Home tab
.themeNavContainer:first-child {
visibility: hidden;
display: none;
}
Entire nav menu
nav {
display: none;
visibility: hidden;
}
GO to builder > Theme > Top Right corner > Edit CSS
Here it is source image
.forceCommunityGlobalNavigation .slds-list__item a, .forceCommunityGlobalNavigation .slds-list__item button {
display: none;
}
What I've used and did the trick:
.forceCommunityThemeNav .mainNavItem:first-child {
visibility: hidden;
display: none;
}
Can anyone have any idea how to make title text of groupbutton not above the icons but under in ExtJS? I was trying to do bbar to the groupbutton but the default td align is to left and I don't know how to change it by css? Thanks for any response.
You can achieve the effect by adding the following CSS to the button:
height: 64px;
background-position: top center;
padding-left: 0px
I this case, I have set the height of the button to be 64px. The will definitely distort the tool bar if you have a combination of default buttons and buttons with the above CSS.