Hemingway Rewritten CSS Invisible toggled menu icon & Add social network icons to menu bar

  • Unknown's avatar
    minja12345 · Member ·

    Hi,

    I need help with CSS for my website. I know nothing of CSS, everything that has been done on my website is trial and error, or help from knowing people.

    I was able to make the menu look the way I want on a computer screen full screen, but when using a smaller window or mobile device, the menu toggles and the toggle icon is invisible, making it hard for people to know that there is an actual menu. I would like to know how to either disable the toggle or have the icon appear when the menu is toggled.

    Another thing the bugs me in mobile format is that the comment section still appears, whereas I was able to remove it from the full sized page format.

    Lastly, I would like to know how to add the social media buttons that are at the bottom of my page to the the menu bar or side bar.

    Here are all the codes I have right now:

    .site-header-image {
	min-height: 0;
	max-height: 300px;
	padding: 6% 0;
}

.main-navigation,
.main-navigation .children li {
	background: #fff;
	line-height: 30px;
}

.main-navigation .menu {
	background: transparent;
}

.main-navigation a {
	background: transparent;
	padding-top: 15px;
	padding-bottom: 0;
	color: #aaa;
}

.menu-menu {
	visibility: hidden;
}

.main-navigation li:before {
	color: transparent;
}

.main-navigation li:hover > a {
	color: #ccc;
}

.main-navigation a, .main-navigation a:visited {
	color: #aaa;
}

.main-navigation .current-menu-item a {
	color: #000;
}

.main-navigation ul {
	text-align: center;
	height: 35px;
	margin-top: -8px;
}

.main-navigation li {
	display: inline-block;
	float: none;
	text-align: center;
}

.site-content {
	margin-top: 0;
}

.tiled-gallery {
	width: px;
}

#header-search-toggle {
	display: none;
}

#respond h3 {
	display: none;
}

#respond div.comment-form-field {
	display: none;
}

.comment-area {
	visibility: hidden;
}

textarea {
	display: none;
}

#respond {
	margin: 0;
	padding: 0;
}

.site-footer {
	padding-top: 0;
}

    [I put your code between code tags for better display – Kathryn]

    The blog I need help with is: (visible only to logged in users)

  • kathrynwp · Staff ·

    Hi – I’ll reply to your questions separately.

    I was able to make the menu look the way I want on a computer screen full screen, but when using a smaller window or mobile device, the menu toggles and the toggle icon is invisible, making it hard for people to know that there is an actual menu.

    When you make these sorts of major changes to your CSS on a responsive theme, you’ll need to restrict them to certain screen sizes so they don’t negatively affect the theme’s responsive styles, which is what’s happened here, where your mobile menu no longer appears.

    You can learn more here about how to use media queries to restrict CSS customizations to certain screen sizes:

    http://en.support.wordpress.com/custom-design/custom-css-media-queries/
    http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
    http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

    I’d suggest you take all the CSS that affects your navigation and put it in in a media query so it only affects larger screens.

  • kathrynwp · Staff ·

    Another thing the bugs me in mobile format is that the comment section still appears, whereas I was able to remove it from the full sized page format.

    Instead of hiding your comments with CSS, you can turn comments off within the WordPress settings themselves. That will ensure they’re always hidden.

    https://en.support.wordpress.com/enable-disable-comments-for-future-posts-pages/

    https://en.support.wordpress.com/enable-and-disable-comments-for-published-posts-and-pages/

  • kathrynwp · Staff ·

    Lastly, I would like to know how to add the social media buttons that are at the bottom of my page to the the menu bar or side bar.

    The sharing buttons at the bottom of your page allow visitors to share that specific page.

    If you’re looking for general social-media icons to help visitors find your social-media accounts, you have a few options:

    https://en.support.wordpress.com/widgets/social-media-icons-widget/

    https://en.support.wordpress.com/add-social-media-buttons-to-your-sidebar-or-footer/

  • Unknown's avatar
    minja12345 · Member ·

    Thanks a lot! I managed to separate the CSS for full screen vs mobile, thus making the toggled menu appear! I was also able to add the social media icons the way it explained in the links.

    However, now with the smaller screens, I would like to know how to make it so that the menu items stay on the same line, or be listed under the icon & over the site content (rather than pushing content down) as the 4-bar icon on the left. Also, if possible I’d like make the menu background to be white/transparent and the icon light grey.

    As for the social media icons/widgets, how can I move them to the menu bar rather than the sidebar or footer?

    For the comments, I noticed all the suggestions you had made were already in place, but the comment section still shows up when I go to my website on my phone.

    Thanks,

  • Unknown's avatar
    minja12345 · Member ·

    here is the new css:

    .site-header-image {
    min-height: 0;
    max-height: 300px;
    padding: 6% 0;
    }

    @media screen and (min-width: 800px) {
    .main-navigation,
    .main-navigation .children li {
    background: #fff;
    line-height: 30px;
    }

    .main-navigation .menu {
    background: transparent;
    }

    .main-navigation a {
    background: transparent;
    padding-top: 15px;
    padding-bottom: 0;
    color: #aaa;
    }

    .main-navigation li:before {
    color: transparent;
    }

    .main-navigation li:hover > a {
    color: #ccc;
    }

    .main-navigation a, .main-navigation a:visited {
    color: #aaa;
    }

    .main-navigation .current-menu-item a {
    color: #000;
    }

    .main-navigation ul {
    text-align: center;
    height: 35px;
    margin-top: -8px;
    }

    .main-navigation li {
    display: inline-block;
    float: none;
    text-align: center;
    }
    }

    @media screen and (max-width: 800px) {
    .main-navigation,
    .main-navigation .children li {
    background: #eee;
    line-height: 30px;
    }

    .main-navigation .menu {
    background: transparent;
    }

    .main-navigation a {
    background: transparent;
    padding-top: 0;
    padding-bottom: 0;
    color: #aaa;
    }

    .main-navigation li:before {
    color: transparent;
    }

    .main-navigation li:hover > a {
    color: #ccc;
    }

    .main-navigation a, .main-navigation a:visited {
    color: #aaa;
    }

    .main-navigation .current-menu-item a {
    color: #000;
    }

    .main-navigation ul {
    text-align: center;
    height: 0;
    margin-top: -8px;
    }

    .main-navigation li {
    display: inline-block;
    float: none;
    text-align: center;
    }
    }

    .site-content {
    margin-top: 0;
    }

    .tiled-gallery {
    width: 1000px;
    }

    #header-search-toggle {
    display: none;
    }

    #respond h3 {
    display: none;
    }

    #respond div.comment-form-field {
    display: none;
    }

    #respond .comment-area {
    visibility: hidden;
    }

    textarea {
    display: none;
    visibility: hidden;
    }

    #respond {
    margin: 0;
    padding: 0;
    display: :none;
    }

    .site-footer {
    padding-top: 0;
    }

  • kathrynwp · Staff ·

    Thanks a lot! I managed to separate the CSS for full screen vs mobile, thus making the toggled menu appear! I was also able to add the social media icons the way it explained in the links.

    Great!

    As for the social media icons/widgets, how can I move them to the menu bar rather than the sidebar or footer?

    You could try experimenting with absolute positioning to move the footer widget with your social icons around on the page. You may need to create several media queries for different screen sizes to get things looking as you want. Here’s a rough idea to get you started:

    #wpcom_social_media_icons_widget-3 {
  position: absolute;
  top: 150px;
}

    More about absolute positioning:

    http://learnlayout.com/position.html

    Absolute Positioning Inside Relative Positioning


    http://cssreset.com/understanding-css-relative-and-absolute-positioning-explained/

  • kathrynwp · Staff ·

    For the comments, I noticed all the suggestions you had made were already in place, but the comment section still shows up when I go to my website on my phone.

    You haven’t yet turned off comments on all your previously published pages. You still need to uncheck the boxes for “Allow comments” and “Allow trackbacks and pingbacks on this page” on all your pages – here’s a screenshot of where that needs to be done:

    WP Admin dashboard – https://cloudup.com/cHPaW-lEFPZ
    If you don’t see this area, open the Screen Options panel at the top of the page and check off the Discussion module so it appears.

    In the new editor, look in the Advanced Settings area – https://cloudup.com/c8rFvGPjbdw

  • kathrynwp · Staff ·

    Also, if possible I’d like make the menu background to be white/transparent and the icon light grey.

    Learning how to use a browser inspector to help you find the right CSS to target for these sorts of changes is tremendously, so I wanted to pass along some tutorials that may help:

    https://thewc.co/articles/view/web-inspector-tutorial

    Intro to CSS: Previewing Changes with the Matched Rule Pane


    http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

    Give that a try and it should help you make the changes you’d like.

  • The topic ‘Hemingway Rewritten CSS Invisible toggled menu icon & Add social network icons to menu bar’ is closed to new replies.