We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
WEBINAR  Building Oqtane Modules With Syncfusion Components for Blazor - Thursday, November 14, 10:00 A.M. ET REGISTER NOW
close icon
  1. Home
  2. Forum
  3. Blazor
  4. Change CSS on Sidebar Demo

Change CSS on Sidebar Demo

I copied the css from the same sidebar demo at https://blazor.syncfusion.com/demos/sidebar/sidebar-menu. 

The body is too close to the sidebar.  How do I change the css to increase the margin so the body is pulled further to the right and remove all colors?

        <div class="main-content" id="maintext">
            <div class="content">
                @Body
            </div>
        </div>

Thank you.









3 Replies 1 reply marked as answer
SP Sowmiya Padmanaban Syncfusion Team October 8, 2020 01:29 PM UTC

Hi slynch,  
 
Greetings from Syncfusion support. 
 
Query 1 - The body is too close to the sidebar.  How do I change the css to increase the margin so the body is pulled further and remove all colors? 
 
In your shared code snippet, you have used main-content class as a target div for sidebar component. so, it pushes the first DIV element inside the main-content div. 
 
 You can customize the main-content of Sidebar by using CSS styles. Refer the below code snippet. 
 
<div class="main-content" id="maintext"> 
            <div class="content"> 
                <div style="margin-left:20px"> 
                    @Body 
                </div> 
            </div> 
        </div> 
 
Please, refer the below sample link. 
 
 
Could you please share more details regarding your requirement. It will help us to provide the solution at the earliest. 
 
1.     Which color you want to remove from sidebar component? 
2.     Exact requirement with Sidebar component. 
 
Refer the below link to know more about the Sidebar component. 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


Marked as answer
SL slynch October 16, 2020 01:03 PM UTC

Thank you that worked but now I am trying to replace the search bar with a logo. I don't know css but I tried with this:



I played with this but no luck, any help would be appreciated:

    #header .logo {
        float: left;
        padding-left: 15px;
        border: 0px solid #242939 !important;
        background-color: #242939;
        cursor: text;
        width: 10em;
        z-index: -1;
        position: relative;
        height: 49px;
    }

SP Sowmiya Padmanaban Syncfusion Team October 19, 2020 07:41 AM UTC

Hi slynch,  
 
You can render any element inside the header section of Sidebar component. For your reference, we have added a logo inside the header element. 
 
Refer to the below code snippet. 
 
<ul class="header-list"> 
                <li id="hamburger" class="icon-menu icon list" @onclick="@Toggle"></li> 
                <img class="logo" src="/images/Syncfusion.png" /> 
                <li class="right-header list"> 
                    <div class="horizontal-menu"> 
                        <SfMenu CssClass="dock-menu" Items="@AccountMenuItems" Orientation="@Orientation"></SfMenu> 
                    </div> 
                </li> 
                <li class="right-header list support">Support</li> 
                <li class="right-header list tour">Tour</li> 
            </ul> 
.logo { 
        width: 50px; 
        height: 50px; 
        margin-left: 20px; 
    } 
 
Refer to the below screenshot. 
 
 
 
Refer to the following sample link for reference. 
 
 
If we have misunderstood, share us the screenshot for your requirement. It will help us to resolve your issue at the earliest. 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


Loader.
Up arrow icon