How to move header menu to the left (next to logo)?

  • Unknown's avatar
    bookingmom · Member ·

    Hi there!
    We have a specific logo in our blog’s header (http://bookingmom.com) which is parameterized in CSS as:

    .branding {
    padding-left: 50px;
    height: 60px;
    width: 30%;
    background: url(‘https://bookingmom.files.wordpress.com/2014/07/logo_sun_new.jpg’) left no-repeat;
    }

    .branding {
    -webkit-background-size:contain;
    background-size:contain;
    }
    .masthead .branding h1.logo a {
    font-size: 30px;
    width: 30%;
    color: transparent !important;
    }

    h2.description {
    display: none;
    }

    .showcase .postmetadata {
    display: none;
    }

    And then headermenu :

    .masthead .menu {
    font-size: 1em;
    position: relative;
    width: 70%;
    float: relative;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

    If you look at the webpage the distance between logo and the menu is too big.
    Is it possible to reduce a little bit this distance by moving header menu to the left, so it would be more centered?
    Of course, it should look good both on PC and on iPad or mobile.

    Thanks a lot!
    Katherine

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

  • Unknown's avatar
    shawnajroberts · Member ·

    Hi there!

    Try this code:

    .masthead .branding {
	width:25%;
}

@media screen and (max-width: 860px) {
	.masthead .branding {
		width:100%;
	}
}

    That last bit fixes the formatting on mobile screens. However, you currently have the standard mobile theme enabled which will display instead of your responsive theme. If you’d like to see Bromley’s responsive theme on mobile devices go to Appearance > Mobile and disable that.

    I also see you’ve added a lot of blocks of code like this:

    .category-237183191 h1.title {
	display: none;
}
.category-237183191 h1.description {
	display: none;
}

    You shouldn’t need to add this for every single category. Can you tell me what you’re trying to do and I can consolidate the code for you?

  • Unknown's avatar
    bookingmom · Member ·

    Hi there!
    Thanks a lot for your useful advice.
    I’ve disabled standard mobile theme and added the code you suggested – it looks great now!

    The reason for the blocks for categories is that if I don’t disable title and description for categories then the huge block with the category title (in big black letters) appears instead of featured posts.

    I asked WP Helpdesk how to remove this and got the reply that CSS should be corrected this way.
    Can I do it some how in other way? It’s very inconvenient for sure to add every time this block for every new category.

    Thanks a lot,
    Katherine

  • Unknown's avatar
    shawnajroberts · Member ·

    Yeah. You definitely don’t have to add that for every single category. Try this code instead:

    .category .title {
	display: none;
}

    I don’t currently see a description on any of the category pages I visited, but if you do have one displaying, you should be able to add this code to remove it:

    .category .description {
	display: none;
}

    Let me know if I can help further! :)

  • Unknown's avatar
    bookingmom · Member ·

    Thanks a lot once again! It’s so simple! :)

    There are another couple of questions I’d like to ask:
    1. Why suddenly our masthead menu changed it’s color to cyan (it was white before)? Is it some automatic update of Bromley theme? Can I modify the colors of the masthead menu?

    2. If I want to use the hierarchy in my header menu, then I use the hierarchy of categories. For example, the in first menu item :
    Where to go? > Parts of the world (Africa, Europe, Asia, America.. etc) -list > for every part of the world list of countries … etc…
    When I choose every menu item, I get the list of Posts corresponding to this category. Is it possible to assign to some particular categories not only the list of posts, but prior the posts some fixed page with information about this category?
    For example, when smbd chooses “Spain” then first of all he/she can see the information about the country (map, climate…) and afterwards, just below this main information, the list of the posts corresponding to “Spain”.

    And a couple of things for our subscribers:
    3. Is it possible to attach some pdf (or other) documents for users to download from our site? We’d like to add some travel guides in .pdf format to download.
    4. When we publish the new post, our subscribers receive an e-mail with the content of the full post. How to make the settings so e-mail would contain only some part of the post and the reference to the webpage to read full post?

    Many thanks in advance,
    Katherine

  • Unknown's avatar
    shawnajroberts · Member ·

    Hi Katherine!

    Why suddenly our masthead menu changed it’s color to cyan (it was white before)? Is it some automatic update of Bromley theme? Can I modify the colors of the masthead menu?

    I’m not seeing any cyan. Is this still an issue? Can you take a screenshot for me and upload it to your Media Library?

    Is it possible to assign to some particular categories not only the list of posts, but prior the posts some fixed page with information about this category?
    For example, when smbd chooses “Spain” then first of all he/she can see the information about the country (map, climate…) and afterwards, just below this main information, the list of the posts corresponding to “Spain”.

    You can do this by using a static page instead of a Category Page in your menu. To do this, create a new page with the appropriate title. Add your introduction to the content area of the page. And then below that, add a Display Posts shortcode:

    Display Posts Shortcode

    For example, for “Spain” you could use this code:

    [display-posts category="Spain" posts_per_page="10" image_size="medium" include_excerpt="true"]

    Is it possible to attach some pdf (or other) documents for users to download from our site? We’d like to add some travel guides in .pdf format to download.

    Definitely! Here’s a quick guide on setting up file downloads:

    Upload a Document

    If you’d like to use an Image as the clickable download link (instead of text), you’ll find directions for doing that at the very bottom of that document.

    When we publish the new post, our subscribers receive an e-mail with the content of the full post. How to make the settings so e-mail would contain only some part of the post and the reference to the webpage to read full post?

    You can do this by adding the Read More tag to your posts. Here’s information on that:

    http://en.support.wordpress.com/splitting-content/more-tag/

    This will also affect your excerpts as they’re displayed on your site adding the same sort of “Read More ->” link to your blog posts.

    Let me know if you have more questions! :)

  • The topic ‘How to move header menu to the left (next to logo)?’ is closed to new replies.