Change how menu looks on small devices

[reikidome]

hi, I don’t like how the menu of sweetdate theme looks on small devices. How can I change the “Please select your page” menu rectangular section to a simple square box like in many other themes?

[Laura]

Hello, please try adding this to style.css

COPY CODE

@media only screen and (max-width: 940px) {
.top-bar {
    background: #37B8DD;
}
nav.top-bar .name {
    display: none !important;
}
.adminbar-enable .sticky.fixed {
    margin-left: 86%;
}
nav.top-bar {
    width: 50px !important;
    padding-right: 60px;
    float: right;
}
.top-bar.expanded {
    height: 100%;
    width: auto !important;
}

.eight.columns {
    float: left !important;
}
.contain-to-grid.sticky {
    width: 50px !important;
}
.top-bar ul > li.has-dropdown .dropdown li a {
    background: #37B8DD !important;
}
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[reikidome]

I don’t think that I have child theme activated since I installed regular theme, can I still edit the settings that you listed above?

[reikidome]

I activated child theme, menu works fine. Thx.

[reikidome]

hi, Menu works after changes but looks really ugly on small devices (I attached print screen). Please let me know what I can do. Thx.

[Laura]

Hello, can you share admin credentials and let me know what small devices?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[reikidome]

On cell phones menu looks ugly and when I make a browser small too. Please take a look at changes in child theme, because I have unchanged version of menu in regular theme somehow. Thx.
http://www.reikiexchange.com
user: reikiexchange
pass: exchange123

[reikidome]

please use the password: alex123

[Laura]

Hello, i see it fine 🙂
Let me know, remember to have child theme activated

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[reikidome]

Please open the menu to see the problem, the button looks fine but the menu when you open it does not look good on cell phones and when I minimize my browser.

http://www.reikiexchange.com
user: reikiexchange
pass: alex123

[Laura]

Should be fixed now, used

COPY CODE

.top-bar.expanded {
    height: 100%;
    width: 300px !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[reikidome]

could it be that this code change that you gave me caused freezing of registration fields on the profile section?

[reikidome]

when I removed the code in this ticket the fields started to function again, but I really want to have a small button instead of the sentence menu. If possible, review the code in this ticket and if possible fix it so that I can use it without problems. Thx.

[Laura]

Hello, you will need to hire a developer to do this for you as we can only help with small modifications

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Author]

Posts